Full-screen slider when scrolling similar to:

[Charlie Stevenson]

Hi all,

 

Just wondering how I'd go about achieving a full-screen, scroll based slideshow similar to the one on the homepage of: https://mubien.com/.

 

I've seen a few posts already about detecting for scroll up/down and changing the slide to transformY in/out. However, in this particular example once you travel 100vh/the height of the slide it's triggering an animation.

 

Any help would be appreciated. 

 

Charlie .

[Rodrigo]

Hi @Charlie Stevenson and welcome to the GreenSock forums!

 

First sorry for the late response.

 

In the particular site you posted, there is some animation going as the user scrolls, a bit of scale and perhaps other transforms as well, but very subtle and with a lot of easing at the start of the animation. With GSAP you can achieve something similar with ScrollTrigger, you just need to add some delay for each slide and make sure that every single slide animation gets the same duration and easing, so it looks the same way.

 

This is a simple example using that approach that hopefully will be enough to get you started:

See the Pen VwxVqoa by GreenSock (@GreenSock) on CodePen

 

Finally, thanks for being a Club GreenSock member and supporting GSAP! 🥳

 

Let us know if you have any question.

 

Happy Tweening!

[Charlie Stevenson]

Thanks, Rodrigo! Big help.