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