Dynamic Pinning and Unpinning of ScrollTrigger Sections

[RegTech]

Hi everyone,

 

I'm working on a website where I have a section that is pinned when reached by scroll, and inside it, a series of animations occur based on the user's scroll. For example, the user reaches the section and a text appears, then they scroll and the current text disappears and the next one appears, and so on about 6 times.

 

Each internal animation is independent of how much the user scrolls and only triggers on scroll up or down, but it doesn't execute as the user scrolls. My problem is that I want to unpin the section once the last animation is completed so that the user can continue scrolling without issues.

 

I have tried several solutions, but they are not very effective. One of them is to allow the next animation to occur in response to the user's scroll, but then prevent the scroll from continuing and set it to a fixed position: window.scrollTo(0, maxScrollPosition). Once the last animation is completed, I let the user continue scrolling. The problem with this solution is that there is a jarring jump on the screen, especially when I scroll back into the section from below.

 

I also tried dynamically setting the end of the ScrollTrigger, using a very large value with a variable like "=+25000" and then, when the last animation is completed, setting the current scroll value to end it. The problem is that if the user quickly scrolls back into the section, it scrolls out quickly and there is no time to run the animations in reverse.

 

I'm using ScrollTrigger with the "pin" option enabled in the section where the animations occur, and that section has an observer that detects when it scrolls up or down to initiate the corresponding animation.

 

I feel that there must be a more natural solution to this problem, and the solutions I've tried are not very clean. I would greatly appreciate it if someone could provide me with an example of how to approach this problem more effectively.

[GSAP Helper]

Hi @RegTech and welcome to the GreenSock forums!

 

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

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[RegTech]

Hello, I would like to share a simple demo that I created on CodePen. When you reach the black section of the page, it will be pinned and a series of animations will occur as the user scrolls. I need this section to remain pinned until the last animation is completed. If the user scrolls quickly, I want the animation to jump to the next one and continue from there. In this example, I set the end of the animation to 4000, but the appropriate value will depend on the user's scrolling speed.  When the user returns to that section scrolling back, I need all this animation in reverse until the first one ends.

 

Thank you!

 

See the Pen MWqMBdR by Danny-Trejo (@Danny-Trejo) on CodePen

[GreenSock]

I think you might be over-engineering there. Normally we don't craft custom solutions like this in these free forums, but I was curious so I whipped together a different approach you could take: 

See the Pen jOvgrMG?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Hopefully it at least gets you going in the right direction. 

[RegTech]

Thank you so much for your help! I really appreciate the time and effort you put into providing me with a different approach. I'll take your suggestion and implement the demo in my code. Thanks again for your guidance and expertise!