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

[Banddev]

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

[mvaneijgen]

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