Jump to content


Strange behavior of "scrub"

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

I need the following behavior: a container with a height of two screens and an inner container with a height of one screen, when scrolling, the inner container is fixed on top of the screen. I wanted to do this using top: 100vh and scrub, but the behavior is different from what was expected. At 30% of progress, top is 51.222vh, at 60% - 84vh, in other words, it is not equal to progress.

See the Pen bGLwgwV by StartToWeb (@StartToWeb) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the GSAP forums @yasurev86


That is probably because by default there is an ease of 'power1.out' set to all gsap tweens. Setting the ease to 'none' should resolve this for you.


By the way, there is no need to wrap the property you are going to tween on in quotation marks.


See the Pen gOvwgKp by akapowl (@akapowl) on CodePen





And in most cases, it is best to tween on transforms instead of top/left/bottom/right because those will most likely cause pixel-snapping, whereas transforms usually won't.


See the Pen dydpNqE by akapowl (@akapowl) on CodePen




Edit 2:

I'm not exactly sure I understand what your end-goal is with this, but you could also keep the inner in place by pinning it.


See the Pen gOvwgZP by akapowl (@akapowl) on CodePen


  • Like 2
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.