Avenues Posted February 24, 2023 Share Posted February 24, 2023 Hi, New here and to GSAP. couldn't find an example of this functionality. I'm trying to create a horizontally scrolling section which is very well documented, but then I would like to get the last section to act like an additional "pin" so that the return to the normal vertical scroll happens after the animation completes. So in my example I set up the box that animates in the last panel of the scroll which should play all the way out in the middle of the viewport before the vertical scroll begins. Really appreciate any help with it. See the Pen ExegVRQ?editors=1111 by dtavenues (@dtavenues) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 24, 2023 Share Posted February 24, 2023 It looks like you're setting up your horizontal scrollTrigger's CSS/html incorrectly: You'll need a wrapping container to hide the horizontal overflow. Also, since the horizontal scroll is ending with the '.box' in the center, the end of the scrub will never be completed. Made some small tweaks: See the Pen ExegKJN by elegantseagulls (@elegantseagulls) on CodePen Link to comment Share on other sites More sharing options...
Avenues Posted February 24, 2023 Author Share Posted February 24, 2023 Thanks @elegantseagulls Are you able to elaborate a bit? I believe I understand the idea behind a wrap element but not sure how that changes things since the pin in the scrollTrigger essentially does that for us. The second part is what I am trying to solve for, For example what if my box animation was a lot longer I would still want that to complete before the full tween is considered finished. Is that doable? do I need to set things up in a different way? Not sure If I'm making sense. Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted February 24, 2023 Solution Share Posted February 24, 2023 1 hour ago, Avenues said: idea behind a wrap element This is to prevent a horizontal scroll bar, which can mess things up (transforms vs real scroll). If you want the box animation to be longer/tied to the pin, you'll maybe want to consider adding it as part of the timeline, and dividing the timeline's duration up to match the ratio of each animation. I updated my codepen to show how this would look: See the Pen ExegKJN?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen 1 Link to comment Share on other sites More sharing options...
Avenues Posted February 28, 2023 Author Share Posted February 28, 2023 Thanks again @elegantseagulls that make sense! The unlock was making the containing animation a timeline itself. I wasn't thinking about it that way. Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 28, 2023 Share Posted February 28, 2023 No problem! Helpful tip for this sort of animation: when scrubbing sections like this, I like to keep the timing for each "section" segment as `duration: 1` so that it's easy to calculate, the timing for each. 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