lolaloop

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

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

Here is the link http://codepen.io/anon/pen/PwPLWb 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.

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?

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