Issue with sticky div jumping after content update.

[hellonachos]

Hi there!

 

Happy to post for the first time on the forum.

 

I’m facing an issue with my sticky div: when I try to update the position of the trigger after content changes, the div jumps unexpectedly.

 

Here’s the strange part—on the first scroll, without any content changes, everything works as expected.

 

However, when I click to show the first category again (either after switching to the second category or clicking it directly), the scroll triggers update correctly, but the blue box jumps on scroll, even though the start and end positions seem correct.

 

Has anyone encountered a similar issue, or can anyone point me in the right direction to fix this behavior?

 

Any advice will be appreciated to get me on the right track.

 

Thanks ! 

See the Pen ByajeMN by saltypepper00 (@saltypepper00) on CodePen.

[Rodrigo]

Hi @hellonachos and welcome to the GSAP Forums!

 

Basically this happens because the pinned element resides inside another one that has transform applied to it, that creates a new stacking context which means the element is no longer fixed relative to the viewport but the transformed element, as explained in these links:

 

https://stackoverflow.com/a/15256339/2456879
https://www.joshwcomeau.com/css/stacking-contexts/

 

You just need to remove the transform styles from that particular parent element using clearProps:

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#clearprops

 

This seems to work in your demo (in the onComplete of line 95 of your JS):

// ...
ease: "power1.out",
  onComplete: () => {
    gsap.set(targetCategory, { clearProps: "transform" });
    if (
      triggerScrollMenu &&
      triggerScrollMenu.scrollTrigger
    ) {
      // ...
    }
  }

Hopefully this helps

Happy Tweening!