Jump to content
Search Community

Horizontal scroll with "Pin" at the end

Avenues test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

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

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

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

  • Solution
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

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...