What is the best practice

[harp30]

Hello,

 

Had a general question when it comes to best practice.

 

example: say we have an animation we want to fade in - or any animation for that matter.

 

Options:

1. do we perform the settings via css file and then animate in JS with GSAP timeline(s)

2. Perform settings in JS via GSAP and then animate via timeline(s)

3. Don’t do any settings and just perform GSAP timeline with from method?

 

to save memory and have best performance, which is the best option?

 

thank you.

[GreenSock]

It's really up to you. Most people prefer to set up the initial state of the page with CSS and then animate things in JS with GSAP. One caveat is that we'd strongly recommend setting transform-related values (scale, rotation, x, y, etc.) via GSAP in order to maximize performance (caching) and avoid ambiguous rotational data that occurs when the browser reports things in matrix() or matrix3d(). Even in that case, though, it's totally fine to set the initial values in CSS and then in the JS level set them again to inform GSAP of your intent. 

 

The good thing about setting initial state in CSS is that the browser can immediately render things in the proper state rather than waiting until some JS files load before executing the code there (which could cause an flash of unstyled content). 

 

Does that answer your question?