Strange behavior of "scrub"

[yasurev86 1 Likes (Newbie)]

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

[akapowl 5,494 Likes (Superhero)]

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

 

 

 

Edit: 

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

 

[yasurev86 1 Likes (Newbie)]

@akapowl, thank you, pin is exactly the behavior that was needed!