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.