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!

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! https://codepen.io/Danny-Trejo/pen/MWqMBdR

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.