D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
pvernier
Full window
Github gist
Drop circles with transition
Drops circles with transition
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> svg { background-color: #4d4d4d; width: 500px; height: 500px; } circle { fill: #b2182b; } </style> </head> <body> <svg></svg> </body> <script src="https://d3js.org/d3.v4.min.js"></script> <script type="text/javascript"> var svg = d3.select("svg") // X coordinates of 25 circles var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 370, 390, 410, 430, 450, 470, 490] svg.selectAll("circle") .data(coordsX) .enter().append("circle") .attr("cx", function(d) {return d}) .attr("cy", 10) .attr("r", 10) d3.selectAll("circle") .transition() .delay(function(d, i) {return i*200}) .duration(1000) .attr("cy", "490"); </script> </html>
https://d3js.org/d3.v4.min.js