[How to play animation backwards]

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

[How to play animation backwards]

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);

[How to play animation backwards]

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.

[How to play animation backwards]

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?

[How to play animation backwards]

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.

 

EDIT:

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){
tl.reverse();
}
});