I want to create an animation triggered by scrolling.

[maximum56]

Hello.

Using GSAP, I’d like to replicate the behavior on the site below. When you scroll from the very top of the page with the mouse wheel, it should stop exactly at the next section regardless of how much you scroll.

https://www.yadohouse.jp/

In my current code, if I scroll vigorously, the page moves down proportionally to the amount scrolled. I want it to move only by the specified transform3D value, without being affected by the user’s scroll amount. Is it possible to fix this with GSAP’s configuration?

Also, on the reference site, the vertical scrollbar is always visible, but on my end, when the main visual is displayed, the scrollbar is not. And when I scroll from the top, the scrollbar itself starts moving. I’d like to move the main visual only by the transform3D amount while keeping the scrollbar fixed at the top.

I’m not sure if the issue is with my GSAP code, so I decided to ask here. I would appreciate any insights you can provide.

See the Pen ByaOera by k_2024 (@k_2024) on CodePen.

[mvaneijgen]

Hi @maximum56 welcome to the forum!

 

You might want to look in to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ and the following demo combining normal scroll with the Observer plugin which as you can see animates to the next slide independent of how much the vistor scrolls. 

 

Hope it helps and happy tweening! 

 

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

 

[Rodrigo]

Hi,

 

This is a demo that uses the Observer Plugin on a Hero section at the top of the page:

See the Pen BagroVM by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!