Search the Community
Showing results for tags 'infinite scrolling'.
Found 1 result
-
Hello, I have been performing some tests with the new v12 engine, its quite awesome really. So I'm trying to create an infinite scrolling background effect. I have a repeatable background divided in 3 divs and I'm animating all of them at the same time, whilst resetting their position and repeating. $("#button").live('click',function(){ TweenMax.to($("#child1"),10,{css:{left:$("#child1").position().left-1500},repeatDelay:0,useFrames:true, repeat:-1,onComplete:function(){ var left = $("#child1").position().left; console.log('has gone to: '+left); if(left<0){ $("#child1").css({'left':1500}); } }}); TweenMax.to($("#child2"),10,{css:{left:$("#child2").position().left-1500}, repeatDelay:0, useFrames:true,repeat:-1,onComplete:function(){ var left = $("#child2").position().left; console.log('has gone to: '+left); if(left<0){ $("#child2").css({'left':1500}); } }}); TweenMax.to($("#child3"),10,{css:{left:$("#child3").position().left-1500},repeatDelay:0, useFrames:true,repeat:-1, onComplete:function(){ var left = $("#child3").position().left; console.log('has gone to: '+left); if(left<0){ $("#child3").css({'left':1500}); } }}); }); When the animation plays at 0.1 speed the effect is smooth but quite fast. When I try to slow down the effect it staggers at each repeat. Also tried with TimelineMax/Lite same thing, tried with useFrames:true, slightly better but above delay:12 it staggers again. Am I doing something wrong or anyone has any idea how can I tottaly control the playspeed and have a smooth animation? you can view this here: http://netgfx.com/trunk/scrollingBG/ Thanks in advance.
