Request : Basic Tutorial for Triggering Scrolling Animations in Parallax Website

[weare2020]

Hi Everyone,

 

I am a complete newbie to Greensock and just starting to teach myself at the moment.

 

I want to make a vertical parallax website and need a basic tutorial for how to trigger Greensock animations when the user reaches a certain point in the page whilst scrolling down.

 

For example on reaching a DIV with ID="#Slide4" it would start to animate another DIV with the ID="Slide4Info" moving in from the side of the browser. I would want it to auto-reverse when the user scrolls back up.

 

How do I link events to the scrollbar and how many pixels you have scrolled down? Is it better to link events to CSS elements like IDs and Classes appearing in the viewport at the bottom of the browser, or when they have reached the top of the browser?

 

I need a complete basic tutorial in how to set up the whole page please!

 

If anyone can point me in the right direction I would be most grateful, thanks!

[Carl]

Hi and Welcome to the GreenSock Forums.

 

Thanks a bunch for taking the time to investigate GSAP JS and for posting your request here.

Your request for this tutorial is duly noted.

 

You should take a peek at John Polacek's SuperScrollorama:

http://johnpolacek.github.com/superscrollorama/

 

Its a jQuery plugin that uses GSAP to create and sequence all the animations.

 

It is driving many popular sites like:

http://www.tcm.com/summer/

http://noonedeservestodie.org/

 

You can look at these sample files for an idea of how it works:

https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo.html

https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo2.html

 

Since John's plugin so expertly handles all the functionality of synching the scroll position to the progress of the animation, there really isn't a need for us ( or anyone for that matter ) to re-invent that type of system.

 

I can see a huge need for an intro tutorial to SuperScrollorama, and I presume that some already exist or are being made (give google a shot)

 

Right now we are swamped with creating learning resources for the core GSAP features and tools so I don't know how soon you will this type of tutorial from us. We will certainly keep it in mind as I'm sure it would be quite popular.

 

Please don't hesitate to participate in these forums, we look forward to helping you along your journey with GSAP JS.

 

Best,

 

Carl

[Carl]

Also, you may find value in the Rodrigo's explanation and sample here: http://forums.greensock.com/topic/6717-horizontal-scrolling-website/