Autoscroll to Scene, Stop, Play GSAP3 Timeline

[ssxd]

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:

 

https://dpotferstudio.com/

 

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!

[ZachSaucier]

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.

[ssxd]

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!

[ZachSaucier]

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