Tag Archives: greensock

Javascript/CSS animation test – Oscillating dot animation

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("
"); }