Jump to content


Relative Background Animation

Recommended Posts

I have successfully animated a backgroundPosition through TimelineLite to achieve a some animation. I am now trying to see if I can achieve this with one Tween. Here is what I need to do but its not working yet.



var TL = TweenMax("#seqHolder", 1, {backgroundPosition:"-=300px 0", repeat:23, paused:true});




I want to have the background subtract 300px from its position every time the tween repeats. Any input would be greatly appreciated. Thanks.

Link to comment
Share on other sites

I don't know if it helps but I'm quoting a piece of advice from Greensock some time ago.



you could set your timeline (or tween) to use frames instead of seconds if that's easier for you. useFrames:true (but if you do that, remember that your durations and your delays should all be defined in frames, not seconds). You might want to check out SteppedEase too if you want to move things in chunks/steps rather than smooth easing.
Link to comment
Share on other sites

When a tween is first run its starting values are recorded internally. On each subsequent repeat it uses the same values over and over.


See this thread which discusses invalidating a tween and restarting it:



see the fiddle too.


Using that technique though you have no ability to reverse and you would manually have to track how many times it played. 


I think using a TimelineLite is the best bet. You can use a simple loop to populate it:




var tl:TimelineLite = new TimelineLite();

for (var i = 0; i < 23; i++){
    tl.to("#seqHolder", 1, {backgroundPosition:"-=300px 0"});
Link to comment
Share on other sites

Thanks Carl. I was working with the code and SteppedEase and I believe I have achieved the desired affect. I was able to get the sprite sheet animated like I did with TimelineLite but I only have to write one line of code.



var TL = TweenMax.to("#seqHolder", .8,{backgroundPosition:"-6900px 0", paused:true, ease:SteppedEase.config(23), onUpdate:updateSlider});



Example of Sprite Animation

See the Pen vghjr by anon (@anon) on CodePen

  • Like 3
Link to comment
Share on other sites

I have been experimenting with animating a sprite sheet in javascript using GSJS. Here is how I have set it up. First I make a image sequence. I started with a 24 frame rotation of a camera. I created a illustrator file 12 x the width of one image which was 300px and 2 x the height which was 300px. My final artboard was 3600 x 600px for this test. For this animation to work all the images have to be lined up in there cells. Below is an example of the final code and animation. Enjoy.

See the Pen dJliq by anon (@anon) on CodePen

  • Like 3
Link to comment
Share on other sites

That's great. Thanks for sharing. Really like it a lot. Very cool who you used set() to switch the y position. Very smooth!

Link to comment
Share on other sites

Thanks Carl. I have had fun with this one!

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.