Stefanp Posted December 9, 2022 Share Posted December 9, 2022 Hi all, New here and I've absolutely loving Gsap and the scrolltrigger plugIn. However I'm struggling to combine a regular animation followed by a scrubbed animation in the same timeline, pinned to the same trigger. The desired outcome is to scrub the red square to the right, after the (non scrubbed) orange square animation is finished. I'm unsure what the 'start' value should be. I tried: start: () => tl.scrollTrigger.end, // function-based value But that didn't work... Can anyone tell me what I'm missing? Thank you! See the Pen QWxPbQz by stefanpullen (@stefanpullen) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted December 9, 2022 Share Posted December 9, 2022 I have a feeling I may be misunderstanding your goal, but wouldn't it be logically impossible to have a scrubbed animation [only] a non-scrubbed one? Like...imagine that you scroll down 100px and it triggers the non-scrubbed animation which takes 2 seconds to finish but during that 2 seconds the user scrolls down really fast (maybe all the way to the end of the page). Now what? How could you have the other animation only scrub at that point? Would it have to dynamically add extra space to the bottom so the scrollbar position would jump with the new room? If not, it'd be impossible to scroll down further. See the logic issue? You definitely made one of the common mistakes - you nested a ScrollTrigger inside a timeline that has a ScrollTrigger. That's logically impossible to have the playhead controlled by BOTH the parent timeline AND the scrollbar position. So you should definitely remove that nested ScrollTrigger. Here's a dynamic solution that just drops it into place when the animation is done: See the Pen eYKoWNX by GreenSock (@GreenSock) on CodePen I hope that helps. Link to comment Share on other sites More sharing options...
Stefanp Posted December 10, 2022 Author Share Posted December 10, 2022 Thanks for fixing the codepen and clearing things up! I see where you're getting at with the logic issue. My first thought would be to disable scrolling until the animation has finished. Need to fiddle around a bit to see if I can make it work... Thanks again for the help Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2022 Share Posted December 11, 2022 12 hours ago, Stefanp said: My first thought would be to disable scrolling until the animation has finished. As a user, I absolutely HATE when sites do that. The user can see the scrollbar...but the site seems "broken" when it refuses to allow them to scroll down (dragging the scrollbar or using their mouse wheel, etc.) 12 hours ago, Stefanp said: Thanks for fixing the codepen and clearing things up! No problem! Happy to help. 👍 Enjoy the tools. 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