Jump to content


How to play animation backwards

Go to solution Solved by jamiejefferson,

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

I am trying to achieve something like this http://www.puma.com/mobium/


Where it only animate when you scroll. I figured it uses mousewheel jquery and tweenlite.

I managed to make the animation play on scroll, but I am having problems trying to make the animation play backwards.


I am using this line of code to make the animation:

TweenLite.to('#animation', 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase});

Also, how do I make the animation actually play a number of frames on one scroll, rather than playing the whole animation on one scroll.



I managed to make it play backward by using timelineLite instead of tweenlite. But I am still having problems with trying to have a better control of the animation.

$("#animationwrap").mousewheel(function(objEvent, intDelta){
if (intDelta < 0){
tl.to('#animation', 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase});
else if (intDelta > 0){
Link to comment
Share on other sites



You also might want to check this codepen by Chrysto, is super useful, handles the most common events (mousewheel, keyboard and navigation buttons) and is comprehensibly commented, so it's very easy to follow and understand what He's doing and why:


See the Pen kDvmC by bassta (@bassta) on CodePen

  • Like 2
Link to comment
Share on other sites

ScrollMagic is a popular library for controlling GSAP tweens based on scroll position. I imagine it would be pretty useful for what you're trying.


Examples ~ Documentation ~ GitHub


I tried making use of ScrollMagic. But from what I've tried it is mostly moving of texts and images. Can it be used to control sprite images to do animations?

Link to comment
Share on other sites

I can't see why not, but ScrollMagic isn't a GreenSock created product so we're not too familiar with all of its intricacies. We don't provide support for it, but we'll recommend people take a look at it since it seems useful for controlling tweens based on scroll position. Would you mind setting up a Codepen demo so we can see what you're trying and how we might get it to do what you want?


P.S. I visited that puma site but it took ages to load and in the end it was just a video, so I'm not sure what I was meant to see there. I assumed there would be some scrolling animations but I didn't have 5 minutes to wait around looking for them.

Link to comment
Share on other sites

Here is the link 

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


I haven't used the codepen before, not sure why it works differently, but the gist of it is there.

It plays animation when I scroll down and reverse when I scroll up.


What I wanted though was, rather than playing the whole animation on one scroll I want it to stop when I am not scrolling.

Same for the reverse.


This is my first time doing animation on html so the direction I am going towards could be totally wrong. Glad if you could help to direct me the right way.

Link to comment
Share on other sites

  • Solution

Ah ok I see what you're working at now. What you had created was an empty timeline, and on every mouse scroll it would add a new 2 second tween to that timeline. Since the tweens would always be towards the same end values, after about 2 seconds it would appear to have "stopped" but really it's just playing a bunch of tweens to and from the same set of values. The first step would be to move the line creating the tween outside of your event, and just playing that timeline forward and backward.


I've added 2 simple ways to get this kind of effect with different results. One has an "unlimited" speed, while the other respects the original speed of the timeline:


See the Pen gbaExL?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to comment
Share on other sites

Ahh yes! This is what I've been looking for. Thank you so much! 


I am trying to understand the code, do you mind explaining this part? What does 'null' do?

var a2wait = null;

if (a2wait) a2wait.kill();
a2wait = TweenLite.delayedCall(4 / numCols, a2.pause, null, a2);
Link to comment
Share on other sites

Sure. This is using TweenLite's delayedCall() in the same manner as setTimeout(). It essentially says "in 2 frames, pause the a2 timeline". 2 / numCols is the time between each sprite frame, so 4 / numCols is the time between 2 frames. It just felt a little more natural to stop an extra frame later in this example.
As per the docs on delayedCall, the 3rd parameter is for any parameter values for the function being called. Since we don't need to pass any values to a2.pause(), null is used to represent this.

Link to comment
Share on other sites

Ahh I see. Alright thank you so much for your patience and guidance! 

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.