Question about using TweenMax for scroll based animations.
Is it better to set the initial position of an element in CSS and then animate using Tween or is it better to do everything using GSAP.
For example, I have a scroll based animation where the opacity and transform properties are animated from 0 to 1, and translate3d(0,80px,0) to translate3d(0,0,0).
Even though all these DOM elements will be animated from an opacity of 0 and translate3d(0,80px,0), I do not set initial starting properties in CSS. Is this more costly in the browser? Would it be more prudent to explicitly set the opacity and transform properties of all to-be animated elements using a CSS class instead?
I guess what I'm asking is, is setting an initial opacity of 0, and transform: translate3d(0, 80px, 0) for all to-be animated elements and then using Tween to animate to opacity: 1 and translate3d(0, 0, 0) less/more costly in terms of browser performance vs not setting initial properties in CSS? Are these even correlated?
I'm asking this question because I've been inspecting my sites performance tab in the debugger and there are several instances of severe FPS drops during these Tween animations. I'm wondering if setting/not-setting the initial values is causing the issue, due to repaints and composite layers, etc. In my head, it makes sense that initial position values would have an effect, but then again I could be totally wrong and these might not be correlated at all.
Any experienced, know-all gurus willing to shed some knowledge and insight into this topic?