Jump to content


Scrolling background image

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

Hi everyone, I'm new to GSAP and am trying to duplicate a jQuery animation using Greensock.


One of the effects is a constant scrolling background similar to http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html


Using tweenMax I've come up with

TweenMax.to($("#bg"),1,{css:{backgroundPosition:"+=1px 0"},repeat:-1});


However the background position resets every time the animation repeats. How can I continue the animation indefinitely without setting the time to something like 99999?

Link to comment
Share on other sites

I think that if you set an onComplete function that restarts the effect from the desired location it will do the trick.


For example:


TweenMax.to($("#bg"),1,{css:{backgroundPosition:"+=1px 0"},repeat:-1,onComplete:function(){
 $("#bg").css({backgroundPosition:"0 0"});

Link to comment
Share on other sites

Thanks Micheal,


I've tried what you suggested but onComplete doesn't seem to be called - possibly due to the repeats.


I've also tried animating the full width of the picture instead {backgroundPosition:"1024px 0"} but it still "jumps" at the end of the animation even with repeatDelay:0 and no easing.


Ideally if there's an option to set "infinite time" then the animation would work exactly how it's supposed to. Perhaps I'm missing something ?

Link to comment
Share on other sites

Yes my bad what you need is the onrepeat function, that gets called when the Tween repeats it-self.

  • Like 1
Link to comment
Share on other sites

Michael71 has the right concept - you could remove the repeat and just use an onComplete (and make sure your ease is Linear.easeNone) to create another relative tween, but I actually think it'd be wiser and get better performance (slightly) to do a little math up front so that you can use a single repeated tween. Here's how it'd work:


Based on your image's dimensions, figure out the appropriate duration and end position (remember that you don't want the last position to match the starting position, otherwise when it loops it'll look like it sits there for one frame):


var width = 1024, //assumes your image is 1024px wide
   speed = 60, //pixels per second
   duration = width / speed,
   endPosition = width - (speed / 60); //adjust the end position assuming 60fps
TweenMax.to($("#bg"), duration, {css:{backgroundPosition:endPosition + "px 0"}, repeat:-1, ease:Linear.easeNone});


So you can tweak the "speed" variable to whatever you want. This way, you've got a single tween instance that's doing all of the work which is better than constantly creating a new tween each loop and pushing the background image further and further.


Make sense?

  • Like 2
Link to comment
Share on other sites

I've tried out both solutions and they both work great. Think my problem was the repeating frame which was causing the "jump". Shouldn't have missed that :?


Thanks guys! Much appreciate the help!

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.