A test using greensock GASP and jquery – with:
Note that the animation plays choppy on older mobile devices when the alpha is tweened.
var MYAPP={}; $(document).ready(function() { MYAPP._body = $('body'); for (var i=0; i<100; i++) { initSQ(i); } $(window).on('resize', onResize); //get query string value if ($.url().param("tweenAlpha") == 'true') { MYAPP.tweenAlpha=true; } else { MYAPP.tweenAlpha=false; } onResize(); }); function onResize(){ var origX = $(document).width()/2; var origY = $(document).height()/2; if (MYAPP.tweenAlpha) { TweenMax.set($("div.bip") , {x:origX, y:origY, opacity:0}); } else { TweenMax.set($("div.bip") , {x:origX, y:origY}); } $("div.bip").each(function(index, element) { if (origX < origY) { rad = origX/2; } else { rad = origY/2; } var ang = Math.random()*2*Math.PI; var x2 = (rad)*Math.sin(ang) + origX; var y2 = (rad)*Math.cos(ang) + origY; TweenMax.to(element , 2, {x:x2, y:y2, opacity:1, delay: index*.01, repeat:-1, yoyo:true}); }); } function initSQ(i){ MYAPP._body.append(" "); }