One element-animation triggers immediately

[Stephane]

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

[GreenSock]

A few issues:

1. You put this line BEFORE you created your ScrollTrigger.batch(), so the positioning was based on that translated value:

   gsap.set(".w3-card-4", {y: 100, opacity: 0});

   Put it AFTER you create the ScrollTrigger.batch().

2. Try setting this:

   ScrollTrigger.config({ limitCallbacks: true });

   It is explained here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

3. ScrollTrigger has a startup phase that basically helps it decide how to handle the initial values - You were waiting 500ms to create things which was AFTER ScrollTrigger finished its startup phase, so the limitCallbacks: true won't work with your delay like that. Get rid of the delay and you should notice that it works as expected.. 

I'm not sure if your CSS framework has anything that might be messing with the animations (sometimes frameworks have CSS transitions...not good). But I suspect the tweaks above will resolve things for you. 

 

If you need that delay before creating ScrollTriggers, you'll probably need to add some fancy conditional logic to apply the initial state differently for things that are in-view. 

 

[Stephane]

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.