I have found an amazing website which uses GSAP but I am not able to figure out how are they animating it

[Kalpit]

Here is the website that I want to replicate the animation from:  https://getsport.io/
What I have tried so far:

I have tried to snap full screen sections and use ScrollTrigger to animate the text when the section comes into view.

This works in a way but I want one section to be scrolled at a time. Also the animation is not smooth.

 

Can anyone help me?

Thanks in advance!

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You said you already tried something, so I'd encourage you to create a minimal demo (like a CodePen) and post it here with your attempt (just some colored <div> elements, not your actual project) and then we can see the issue in context and answer any GSAP-specific questions. 

[Dmitry Litvinov]

Hello,

 

we have implemented the following mechanism:

 

1. Sections have been divided into those with traditional scrolling and block scrolling.

2. Block scrolling is implemented first. As the website was developed using Vue, the content was divided into blocks and v-if was used to display them.

3. An instance of the Observer was created to track up and down scrolling of the mouse wheel, which toggles the state (0, 1, 2, etc.).

4. When the user reaches a section with traditional scrolling, overflow-y is switched from hidden to scroll.

 

Hope this will help you, 

Dmitry L. from nextweb.fi