Jump to content
Search Community

Moving Fixed (or absolute) Element when ScrollTrigger is been fired with GSAP and Scrollsmoother

Banddev test
Moderator Tag

Recommended Posts

I'm working on a project where I'm using GSAP, ScrollTrigger, and scrollsmoother.


I have a fixed element that I want to remain fixed until ScrollTrigger is fired, at which point I want it to move along with the rest of the page smoothly.


I've attempted two approaches: one with the fixed element positioned outside the id="smooth-content" container (https://codepen.io/mp1985/pen/ZENOaeg) and another with the same element positioned absolutely within the id="smooth-content" container (https://codepen.io/mp1985/pen/LYoZOmW).


However, I'm encountering difficulties in achieving the desired behavior.


Is there a recommended approach to accomplish this?


is there a way to obtain the scroll value when ScrollTrigger is fired so then I can synchronize the movement of the fixed (or absolute) element accordingly?


Any insights or guidance would be greatly appreciated!

See the Pen ZENOaeg?editors=1010 by mp1985 (@mp1985) on CodePen

Link to comment
Share on other sites

When working with ScrollTrigger it is best to let it handle all the positioning of elements. Eg in this case create a ScrollTrigger that pins the element you want to pin until you don't want to pin in anymore. I hade to tweak your CSS a bit to get it to behave it selfs, but it could then look something like this. Hope it helps and happy tweening! 


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

  • Like 3
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.
  • Create New...