Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
    <head>
<script class="jsbin" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
        <meta charset="utf-8">
        <title>asynchronicity</title>        
   
        <script type="text/javascript">
        window.onload = function () {
​
            //Point Array
            pointListOne = new Array ();
​
            // Create Canvas
            var r = Raphael(10, 50, 600, 600);            
​
            // Make a 'group' of points
            for( i=0; i<20; i++){   
​
                    //Create Point            
                    pointListOne[i] = r.circle(10*i, 10*i, 5);
                    pointListOne[i].attr({stroke: "none", fill: "#999", opacity: 0});
​
                    //Fade in   
                    pointListOne[i].animate({opacity: 1}, 1000 );  
​
            }
          
          // This will be drawn at the same time as the above list of points.          
​
            pointListTwo = new Array();
            for (i=0; i<20; i++) {
              pointListTwo[i] = r.circle(10*(20-i), 10*i, 5);
              pointListTwo[i].attr({stroke: "none", fill: "#ff0", opacity:0});
              pointListTwo[i].animate({opacity: 1}, 1000);
            }
          
        };
        
        </script>
    </head>
​
    <body>
        <div id="holder"></div>         
    </body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers