tmbr Posted October 14, 2022 Share Posted October 14, 2022 We have a situation where we would like the following to happen: 1.) User scrolls down the page and triggers some animation, the progress of which is controlled using ScrollTrigger. 2.) This animation is pinned while it is running, and then releases at the bottom. We want the animation to be "slower" than just scrolling through the normal height of the trigger element, so we've been using end: "+=1500px" to increase the duration. 3.) When the animation completes, we want the user's scroll up experience to be completely different. We do not want the animation to run, and only want to show it in its "completed" stage. We also want the user to not have to scroll through all of the artificial padding/space that is added from the combination of end: "+=1500px", pin: true . We want them to only scroll through the height of the trigger div without the added padding. 4.) When they scroll back up the page above the element, the timeline resets, such that when they scroll back down it triggers the animation as normal. The codepen should show all of this except #3. I have not found a way to remove the pinned element and padding while still keeping the timeline intact. Manually removing the styles with something like gsap.set(scrollDiv, {clearProps: true}); causes a significant "jump" down the page, resulting in a bad UX. I'm hoping that this transition will be seamless. Is this possible? Thanks! See the Pen KKREWVp by jhenley45 (@jhenley45) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 14, 2022 Solution Share Posted October 14, 2022 Is this what you're looking for?: See the Pen bGMZqaN?editors=0010 by GreenSock (@GreenSock) on CodePen Notice that you've gotta manage the scroll position because if you rip out (disable) that ScrollTrigger that added the pinSpacing, it'll collapse the page and the scroll position will completely change. Same for re-enabling it. Link to comment Share on other sites More sharing options...
tmbr Posted October 15, 2022 Author Share Posted October 15, 2022 Yes, exactly! Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now