Jump to content
GreenSock

Michael71

Infinite Scrolling with TweenMax/TimelineMax

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

What do you mean by "it staggers" when you slow down the effect? And how are you slowing it down - by reducing the duration parameter or adjusting the timeScale?

 

FYI, your code looks like it would animate the object's "left" property 1500 pixels over the course of 1/6 of a second (10 frames @ a typical 60fps default) - is that really how fast you wanted it to go?

 

And did you intend to leave the default ease in place? I assume you probably wanted an ease:Linear.easeNone right?

 

Oh, and your onComplete would never fire if you're infinitely repeating since there is no end. Maybe you meant onRepeat?

Link to comment
Share on other sites

I'm not deliberately trying to slow down the effect, I guess the only thing slowing it down is when it reaches the end of the duration.

The "staggering" is obvious in the page i posted, it is happening as the effect is restarting.

Maybe the easing does play a big role in this indeed.

 

What I'm trying to achieve is to be able to slow down the scrolling or make it go very fast, but the problem is that the movement is not linear when it restarts.

 

I will definitely try the easing parameter (which is 99% what is wrong). I'll post the results in any case.

 

EDIT: Well the ease:Linear.easeNone did work, and up until duration of 2'' the animation is perfect, over 2'' sometimes it "lags" a bit. I'm trying with latest Chrome and my CPU is pretty good. Is there something that I can declare differently to achieve maximum smoothness? (even if it means adding more or less images to animate).

Link to comment
Share on other sites

Yeah, I suspected the ease was the issue. As far as improving performance, I doubt that JS code execution is the bottleneck. Typically graphics rendering is far more processor-intensive, so anything you can do to reduce the amount of graphics/images that the browser has to juggle, the better. Even objects that aren't technically visible on the screen are still rendered by the browser, so be careful of those. For example, if you have 100 images that are arranged next to each other in a long line but only 3 are visible on the screen (the others bleed off the edge), all those images will bog down the browser unless you set their "visibility" property to hidden or set display:none. I hope that helps.

Link to comment
Share on other sites

Thanks Jack this visibility/display tip was very helpful (I think flex displayView handles things the same way).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×