Jump to content


Horizontal Scroll and Pinned Layers

Recommended Posts

Hello GSAP community. I'm learning how to use the ScrollTrigger plugin, and it's been great so far. However, I've found a block that I haven't been able to overcome, perhaps by my lack of expertise using GSAP 😅


I attached a codepen where I have a slider that scrolls horizontally while you scroll down the page. That part works as expected.

Then, I have a couple of sections (with the text Stacking content). I want the red section to stack on top of the slider (pinned sections). It kinda works but the last slide suddenly disappears.


I read another thread here on the forums related to a webkit bug while handling the background CSS property, but this is not the case, since all the content disappears.


I've searched the forum, the official codepen profile and the official docs, but still can't find a solution.


Do you have any idea what would be the cause of this issue?


Thank you

See the Pen eYGrdLe by spacebromx (@spacebromx) on CodePen

Link to comment
Share on other sites

Hi spacebro,


I think this is part of the problem. You're including the last section in both triggers.

<section class="panel gray stack" style="margin-bottom: 100vh; background-color: lightgreen; width: 100%">


I would get rid of those inline styles, the stack class, and try from there.


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


Link to comment
Share on other sites

Thank you very much OSUblake, your solution is great!


I will post back later when I solve the issue with the height of the horizontal snapping section in case others have the same issue


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.