Tween on scroll and reverse on trigger

[yulia]

Hello! I need the "absolute" element to become "fixed" when scrolling 120px.

After the trigger, this element must again become "absolute".

But, if you scroll in the opposite direction - up from the trigger, the element must again become "fixed" until it reaches its original position. There he must again become "absolute".

 

In my project it works only in one direction - before the trigger. And nothing in codepenio works at all Help, please

See the Pen orXRmM by yuliarushay (@yuliarushay) on CodePen

[PointC]

I'm not sure you really need ScrollMagic for this. Have you looked at position:sticky?

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://css-tricks.com/position-sticky-2/

[yulia]

Thanks! But this property has poor support and it is not suitable for my case. I have a menu that when scrolling should stick up and be in view. But this menu should not overlap the block with the text.

[PointC]

Well, if you need to do this with ScrollMagic, I think you'll have to set a duration of 1 in the scene parameters. Maybe something like this:

 

See the Pen bPVpWJ by PointC (@PointC) on CodePen

 

I'd also recommend just tweening the properties you need rather than changing classes.

 

Since this is a ScrollMagic question (not a GreenSock product), you can ask additional questions in their support area:

https://github.com/janpaepke/ScrollMagic/issues

 

Or they also have premium support here:

https://support.scrollmagic.io/

 

We're happy to help with GSAP related questions or problems. Happy tweening.

[yulia]

Thanks! I have already got used to do everything with the help of greensock) and did not even check the ready-made solutions ?‍? This works perfectly: sticky-kit.js