Jump to content
GreenSock

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

Control animation by scroll event

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

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.

Link to comment
Share on other sites

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.

  • Like 1
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.
×