Control animation by scroll event

[thewebdesignerpro]

Is it possible to use scroll events to trigger resume and reverse for an animation? On default, I want the animation paused/stopped. When I scroll down (one swipe of mouse wheel or one click on scroll bar down), animation will resume 1 frame. And when scroll up, the reverse.

[Rodrigo]

Hi and welcome to the Greensock forums.

 

There are two possibilities:

 

1.- Use John Polacek's superscrollorama. A great JQuery plugin to control tweens and timelines with scroll. It also supports touch events, check it here:

https://github.com/johnpolacek/superscrollorama

 

2.- Do everything by hand including add a library to support touch devices:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

As you can see is not very complicated, just need to tap into jQuery's scroll() event, the tricky part comes with the element's offsets, specially in dynamic pages.

 

Rodrigo.

[thewebdesignerpro]

Thanks rhernando, I will check out those links you provided.