General question for performance

[harp]

Is it best to set all your soon to be animated elements in css and then just animate the values in our timelines?

Is it bad to set the element(s) values in the timeline and then animate, like:

let testTl = new TimelineLite();

testTl
 .set(jsScrollCta, {opacity: 0, autoAlpha: 0})
 .to(jsScrollCta, 1, {opacity: 1, autoAlpha: 1});

Is this bad practice? Because if we set a lot of elements and then animate, that will cause slowdown right?

[GreenSock]

That's perfectly acceptable, sure. It's also okay to set things in CSS initially, but I'd strongly recommend using a GSAP-based set() for anything transform-related because:

1. It normalizes browser behavior (browsers have some weird issues with transforms in some cases)
2. It ensures that GSAP caches the independent component values properly. For example, you can have xPercent as well as an x (stacked), but if you tried setting those in CSS, the browser always reports them in a matrix() or matrix3d() without any percentages, plus that loses any data about rotations beyond 360. So basically it helps things be more accurate.
3. It makes future tweens faster (due to the caching of the values, it can skip the complex parsing of CSS matrices). 

I doubt you'd see much of a performance difference in real-world situations. 

 

The only other thing to keep in mind is that sometimes the browser doesn't run JS for a brief moment on initial load, so if you try to set() opacity to 0 or something, it may initially show as visible for a moment before the JS kicks in and hides it. In those cases, I'd just set the CSS opacity or visibility or whatever to hide it initially. 

 

Does that answer your question? 

[harp]

Yes, makes total sense! Thank very much!