Pinning title for Horizontal Scrolling

[yazan-slaim]

 

Hi everyone,

I'm working on a project where I'm trying to pin a title during horizontal scrolling. I've successfully implemented vertical scrolling with ScrollTrigger and pin:true, but I can't seem to figure out how to achieve the same for horizontal scrolling.

I've provided a link to a StackBlitz project where you can see my working vertical scroll example, but the horizontal one isn't functioning as expected. Any help or suggestions on how to make this work would be greatly appreciated!
 

StackBlitz Demo Link: 

https://stackblitz.com/edit/stackblitz-starters-zxxdmi?file=app%2Fpage.jsx

 

Thanks so much for your time and assistance!

[Rodrigo]

Hi,

 

Pinning is not supported for the normal way horizontal scrolling is achieved using regular vertical scroll. For that you have to create a timeline that moves the elements horizontally and stop/pause that timeline for the amount of time or scrolling distance you want that element to be pinned for as shown in these demos:

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

 

See the Pen WNyJQjN by GreenSock (@GreenSock) on CodePen.

 

Another option is to use position (relative on the parent and absolute on the child or element you want to pin) in order to move the pinned element to the right as the parent element moves to the left.

 

Hopefully this helps

Happy Tweening!