Horizontal Scroll with Left Pinned Sections

[nyldev]

Hi community, 

Hoping someone can help with this issue - I have a single page application that goes into a section that I would like to enable horizontal scroll for. Within that horizontal scroll are sections that I would like scroll through horizontally but instead of having the sections scroll out of view I would like for them to stop on the left of the screen and overlap each other. I was able to work the horizontal scroll but can't get the sections to stick to the left. When I try to add a second scroll trigger for each panel to stop on the left side of the window, the first scroll doesn't behave as expected and makes the panel disappear when the first scroll is started. 
 

See the Pen src by p (@p) on CodePen

[nyldev]

https://codesandbox.io/p/sandbox/horizontal-scroll-with-left-sticking-panels-6yg39f?file=%2Fsrc%2FStickyScroll.jsx%3A7%2C29

Not sure why codepen won't load but here is the link for reference. Would appreciate any advice! 

[Rodrigo]

Hi,

 

Horizontal pinning is not supported for logic reasons, keep in mind that you are using native vertical scrolling to move elements horizontally while pinning the parent, nothing more. Pinning horizontally would require a lot of custom logic and even in that case I'm not 100% sure that is possible. The key here is the horizontal movement of the elements, what you can do is emulate pinning by stopping that movement for some time like in this demo:

See the Pen NWzgrQQ by GreenSock (@GreenSock) on CodePen

 

You can check this thread for more information and details:

 

Finally I see that you're using React but you're not doing cleanup in your effect hook. Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Hopefully this helps.

Happy Tweening!

[nyldev]

Thanks for your response and the resources @Rodrigo.

I've switched to useGSAP and tried to implement some changes based on the docs and links you provided but I'm still having trouble emulating a left justified pin.  Please see the codepen below to my new attempt. 

https://codesandbox.io/p/sandbox/scroll-section-with-fake-pins-vglmmt

I've gotten the horizontal scroll to engage and correctly scroll through the sections and then ending the trigger to move onto the rest of the web page - but I am having trouble pinning the coffee cup. Preferably as we scroll through the horizontal scroll, the cards should scroll from right to left and out of view but the coffee cup should scroll up to the point where it's next to the laptop and stay in place. Is the way I have the useGSAP set up for the coffeeContainer not the correct strategy? 

[Rodrigo]

Hi,

 

Yeah that sounds like a more convoluted thing to do and a bit beyond the scope of these free forums. Unfortunately we don't have the time resources to create custom complex solutions for our users, sorry. We do offer paid consulting services and you can post in the Jobs & Freelance forums to get help there.

 

The one advice I can give you is to forget about React and ScrollTrigger right now, the reason? Super simple you just want to animate some elements horizontally, nothing more. Sure the animation and HTML/CSS setup is the complex part here but both React and ScrollTrigger will be adding an extra layer of complexity to this that you don't have to focus on at this point. Try to move the elements to the left, maybe give the panels a position relative and the cards position absolute, and then as the panels move to the left move those elements to the right using the container animation feature:

https://gsap.com/blog/3-8/#containerAnimation

 

Also you can translate the cards to the right using just regular animations as part of the same timeline as well.

 

As you can see there are options but what you're trying to achieve is not the simplest thing. Not the most complex one but definitely not simple. This is more about taking it one step at a time and build from there. If in that process you have some GSAP related questions, don't hesitate to post either in this thread or create a new one if you prefer.

 

Happy Tweening!

[nyldev]

 @Rodrigo 

Completely understand not being able to dive into the specifics for this complex problem. I more than appreciate your efforts to point me in the right direction and proposing a different strategy. I'll look into your suggestion and take your notes into account. 
 Once again - thanks so much!