Jump to content


Tween on scroll and reverse on trigger

Recommended Posts

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

Link to comment
Share on other sites

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.

Screenshot at Jun 13 18-55-05.png

Screenshot at Jun 13 13-15-46.png

Link to comment
Share on other sites

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:



Or they also have premium support here:



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

  • Like 2
Link to comment
Share on other sites

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 

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.