Jump to content


Autoscroll to Scene, Stop, Play GSAP3 Timeline

Recommended Posts

Hi GSAP folks!


I'm brand new to animating anything on the web (aside from CSS3 animations or... ye olde Flash animations from 13 years ago), but I have a pretty solid mastery of front end dev techniques. I've made some good progress running through the forums here and elsewhere, and subscribed to the Creative Coding Club. Thanks for all the great resources!


I'm working with GSAP 3, and ScrollMagic so far. I have a client that is looking to create a website that behaves like the one here:




They're looking to have the user "scroll", then the page scrolls to a new scene and plays the animation. I understand how to implement ScrollMagic, utilize setPin, setTween, etc., and setup a GSAP timeline, but i'm not sure how to implement the snap to scene THEN play the animation situation. Is this something that GSAP + SM can handle? Or with this require some additional custom JS outside the box?


Thank you so much in advance for any help you can give me. I certainly appreciate it!

  • Like 1
Link to comment
Share on other sites

Hey ssxd and welcome to the GreenSock forums!


This sort of thing doesn't require ScrollMagic at all. It's not a GreenSock product and we don't recommend using it in most cases. What you're essentially wanting is full screen "slides" that are animated between. For that, you can use a simple approach of detecting the scroll delta and, depending if it's positive or negative, use a set animation to go to the next or previous "slide". The thread below has a solid approach of doing just that.


Then all you have to do is add the additional (non-"scrolling") animations when you want them to fire.

Link to comment
Share on other sites

Thank you so much @ZachSaucier! I'll check out that thread. I'm going to try and convince them that a non-scrolljacking approach is significantly more user friendly and frankly better design. In the case they are immovable on it though, I definitely need a solution.


Thanks again!

Link to comment
Share on other sites

The thread I posted does indeed scroll-jack. You should look at the demo in it.

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.