Scroll trigger - keep element pinned

[BrianCross 50 Likes (Contributor)]

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!

 

Brian

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

[OSUblake 18,475 Likes (Superhero)]

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.

 

[GreenSock 18,253 Likes (Superhero)]

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

[BrianCross 50 Likes (Contributor)]

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