Pinned horizontal scroll that only displays inside a container?

[akudlac]

The codepen is the general idea, a horizontal section to overlay the previous. My issue is that the incoming section starts to display outside of its container.  I've played with overflow: hidden but nothing. It's probably something simple I've missed.

 

Thanks in advance.

See the Pen yyBWYzv by akudlac (@akudlac) on CodePen.

[mvaneijgen]

Pin wraps the element in position: fixed, which changes the stacking order. You can change to pinType: "transform" which does not change the stacking order

 

See the Pen RNbmZOQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

This is just a demo of course, but I don't see what the pin is doing. You can just as easily just make the .purple element 100% which gives the same effect and you'll not need a pin

 

See the Pen NPKVvmo?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

 

Side note: when working with a tool it is best to make sure it is always up to date, in your current pen you use version 3.91 and we are version 3.12.7!  Here is a starter template which loads all the plugins always being up to date! 

 

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

 

Hope it helps and happy tweening! 

[akudlac]

On 2/4/2025 at 3:51 AM, mvaneijgen said:

Pin wraps the element in position: fixed, which changes the stacking order. You can change to pinType: "transform" which does not change the stacking order

 

 

 

 

 

This is just a demo of course, but I don't see what the pin is doing. You can just as easily just make the .purple element 100% which gives the same effect and you'll not need a pin

 

 

 

 

Side note: when working with a tool it is best to make sure it is always up to date, in your current pen you use version 3.91 and we are version 3.12.7!  Here is a starter template which loads all the plugins always being up to date! 

 

 

 

 

Hope it helps and happy tweening! 

Way late with this, but thanks so much! So simple, yet so frustrating.