Jump to content


Scroll trigger - keep element pinned

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone,


Just wondering what the best practice is in this case. I'd like to always pin the container divs in this CodePen example to prevent them from un-pinning at each end of the scroll range. Currently they'll un-pin as expected and the tween will then scroll up or down as it finishes up. What's the best way to keep these divs in place so the next tween can start while the previous one finishes up, without any of them moving vertically? I'm sure I can figure out a solution but I'd like to know if there's a simple technique I might be overlooking.


Thanks in advance and happy tweening!



See the Pen rNjomLx by BrianCross (@BrianCross) on CodePen

Link to comment
Share on other sites

Pretty sure that would involve some sort of scroll jacking. What you're basically asking for is a way to pause scrolling, which isn't possible unless you hijack the scroll.


  • Like 1
Link to comment
Share on other sites

  • Solution

Yep, here's a fork that uses ScrollTrigger for smooth-scrolling the whole thing. You've gotta add 2 wrapper <div> elements, use the smoothScroll() helper function, and apply the scrub value to the smoothScrolling and set scrub: true on your timeline's ScrollTrigger:

See the Pen yLgGzoN?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

@OSUblake @GreenSock thanks so much guys. Yeah I think this is a much more elegant solution than what I was thinking. So much learning going on here and it's much appreciated.

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