Jump to content
Search Community

Problem with horizontal scrolling ScrollTrigger and sticky element

Wolfcoding test

By Wolfcoding
in GSAP

Moderator Tag
 Share
Go to solution Solved by Cassie,

Recommended Posts

Wolfcoding test

Wolfcoding

Posted
Posted

Hi everyone, I am having trouble with getting a sticky element to work together with ScrollTrigger. As you can see in the codepen the horizontal scrolling is working great, but when you finish with the horizontal scroll and move to the next section the sticky element will immediately jump to the bottom of the element. I am not sure how to prevent this. When I disable the horizontal scroll the sticky component works as expected so I think it gets confused there somehow.

 

PS: please test with a desktop resolution, the problem is hard to see on mobile or in the frame below.

See the Pen QWoyOZv by edwin_rocketcode (@edwin_rocketcode) on CodePen

Link to comment
Share on other sites
  • Solution
Cassie test

Cassie

Posted
  • Solution
Posted

Hi there!

 

Thanks for being part of Club GSAP 💚

 

So in this demo your sticky item is inside the container that GSAP is pinning .page-content - when GSAP pins something the pinned element gets immediately wrapped in a <div> with a fixed width/height to match. A class of "pin-spacer" is added to that wrapper. Think of it like a proxy element that props open the space where the pinned element was in the DOM so that when it flips to position: fixed things don't collapse.

 

TLDR - CSS sticky doesn't play nicely with this. The solution is to use GSAP's pinning abilities instead.

 

You will need to account for the offset start position by declaring that it's in a container that has been/is being pinned

Quote

Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.


Also, nested pinning is not supported so we kinda have to hack around a little by adding pinReparent:true - it's best to avoid this by setting up your DOM to avoid nested pinning, but I'm not sure how to avoid this in your case.

 

Quote

pinReparent
Boolean - If true, the pinned element will be reparented to the <body> while it is actively pinned so that it can escape any ancestor containing blocks. If you notice odd behavior while pinning (like the pinned element suddenly shifting and then moving with the scroll), you probably have a transform or will-change on an ancestor element which breaks position: fixed behavior (it's a browser thing, not ScrollTrigger). It's best to set up your project to avoid those because reparenting can be expensive, but pinReparent: true can bail you out if you can't avoid them. Only use this feature if you must.

 


See the Pen MWxKrNM?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

 

  • Like 2
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...