Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
weare2020

Request : Basic Tutorial for Triggering Scrolling Animations in Parallax Website

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×