ScrollTrigger (un)smooth movement

[Stephane]

Hello

I have what may be a simple problem but I cannot seem to figure it out.

I use scrolltrigger to drive a timeline animation with embedded timelines (no scrolltriggers on embedded timelines).

It uses snapping to snap to Labels.

My challenge is that the animation is very un-smooth.

I have made a very crude codepen demo - just drag the scroll to where an element is on screen and let go to see the unsmooth movement on the element.

It is espedially noticable at the beginning/end of the snap-anim.

 

Is there any way to remedy this?

And am I missing something obvious?

 

See the Pen qBJPWye by OwnWorld (@OwnWorld) on CodePen

[GreenSock]

The fundamental problem is that the way you've set things up results in each single pixel of scroll correlating to many pixels of horizontal animation movement. So if you just move the scrollbar 1px, it may cause your text to move 12 pixels for example. That's why it looks jerky (browsers don't move the scrollbar less than 1px at a time). 

 

You could just set scrub: 0.5 (or some number) rather than true so that it smooths out the movement of the playhead. 

 

Your setup looked very odd to me, by the way - you're toggling position: absolute which messes with layout/height right in the middle of the scroll (multiple times). If it gives you the result you want, fine, but it just seems very odd and risky to me. Typically you wouldn't want to alter layout that way especially if you're doing pinning. 

 

Anyway, I hope that helps!

[Stephane]

Thanks a lot Jack - that was exactly what I was missing (something obvious).

I was worried that it was some sort of order-of-creation problem that I could not spot.

I have changed the codepen demo and movement is now smooth.

 

Yes, the "position: absolute" was a little brute force'y but did the trick for the demo.

I will go about the positioning of elements next and go through even more demos

Scrolltrigger really is a versatile tool with many different ways to implement - pretty awesome.

 

Thanks a lot for the help.