Play animation on scroll

Question

I am trying to build an animation that moves on each scroll on HTML5. Something like this website http://www.puma.com/mobium/. It moves only on scroll.

After reading up much, I figured it could be a .gif playing on scroll. So I created a gif frame by frame on canvas so that I can control the frames. However now, it plays automatically when window is open. Based on the research I've done, they're mostly about playing the .gif when it is scrolled to. Which is not what I am looking for.

Is it possible to make it play frame by frame on each scroll?

I am a beginner in exploring the html5 and all these parallax things so any other methods available feel free to suggest.

Answer 1

Looks like most of the animation is handled by a JavaScript library called TweenLite js. which works like tween in Flash. TweenLite basically moves the object from one to other.Scrolling is captured by Jquery mouse wheel plugin

Jquery mouse wheel

TweenLite Js

In the puma mobium many of the animations you see are from sprite images.

Camera Guy

Girl

Backgrouds :

http://www.puma.com/mobium/images/scene/1024/Background_01.jpg http://www.puma.com/mobium/images/scene/1024/Background_02.jpg http://www.puma.com/mobium/images/scene/1024/Background_04.jpg http://www.puma.com/mobium/images/scene/1024/Background_05.jpg

Running Guy :

http://www.puma.com/mobium/images/scene/1024/runner_0_m.png http://www.puma.com/mobium/images/scene/1024/runner_1_m.png http://www.puma.com/mobium/images/scene/1024/runner_2_m.png

Audio which plays contuously

As you can see most of them are sprites there's also a CSSPLugin from TweenLite for controlling the css properties for animation.

so when you scroll the mouse the position of images in the sprite is moved and it looks like a animation for the eyes.The position of images are changed by the background position property by CSSplugin and mosuewheel jquery js is used for mouse scroll.

Apart from the move scroll. Animation is also controlled by left and right arrows.

https://greensock.com/get-started-js

Above link clearly explains the basics to get started with TweenLite Js.

You can find the sprite images from the Network Tab in Chrome Developer Tools. Hope the information helps you!.