Jump to content
Search Community

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

Kalpit test
Moderator Tag

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 weeks later...



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

  • Like 3
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.
  • Create New...