I am new to both Jquery and TweenMax but so far I love using TweenMax js.
I took the code from http://www.snorkl.tv...script-preview/ exploding bunnies example and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don't currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load.
Any ideas of what I am doing wrong?
here is my code:
var rainDrops = $(".rainDrop");
var frame3Tl = new TimelineLite({paused:true});
rainDrops.each( function (index){
var delay = 1 + (Math.random()*2);
var duration = 1 + (Math.random()*3);
var left = 7 + (Math.random()*840) + "px"
var rainDrop = $(this);
$(this).css({'left': left});
frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}),
TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}),
]);
}
)
Thanks for your help!