[ScrollTrigger (un)smooth movement]

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.

[ScrollTrigger (un)smooth movement]

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

[One element-animation triggers immediately]

Thank you for the very informative answer. More than I could have hoped for.

 

Removing the delay and setting the position and opacity after the ScrollTrigger setup did the trick.

I did not fully understand the "ScrollTrigger startup phase" and when that happens.  I will dig deeper into this.

 

I also read about "ScrollTrigger.config", which is a really good performance trick to know about (in certain scenarios).

 

Finally, I am experiencing some anomalies with how ScrollTrigger sequences (staggers) element-animations, and yes, the delay was to remedy that.

No doubt this has to do with the CSS I am using, but that is for another topic.

Thank you so much.

[One element-animation triggers immediately]

I'm still learning to use ScrollTrigger and I am combining it with W3.CSS  Responsive.
My simple problem is that I use ScrollTrigger.batch on a bunch of elements, but after it is applied, one element (the first element) does its animation and I would like it not to.

I hope this is a simple issue although I haven't found anything in "common mistakes" etc.

 

The pen shows the first CARD-element do its unwanted animation.

P.S. There is a 500 millisecond delay before the ScrollTrigger is applied to the docuement.

 

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