Thanks for the warm welcome & the interesting insights. Didn't expect such a fast reactions, hence the late reply.
If I analyse correctly, our biggest enemy here is the reflow, which should be less relevant as its a fixed position non responsive animation.
I don't understand why painting would be an issue here; If I change the curved line reveal to a linear one, performance goes up, although it are still the same amount of pixels to be drawn in a comparable timeframe, not ?
I did some tests on both the CSS and the GSAP approach.
CSS: To ensure the elements are rendered on a seperate layer, I added the following to all the divs
- backface-visibility: hidden;
- will-change: transform, opacity; /* or others*/
- position: fixed;
The result can be found on http://codepen.io/Dx802/pen/LNJGJo
It looks more performant, but still the GSAP seems to win
GSAP : http://codepen.io/Dx802/pen/PNdZXz
- Its not the exact same animation; I wasn't able to match the exact 3d transform and was not able do the curved line reveal
- It looks like using the CSS 3d transform wasn't just transferable to GSAP. Any tool like http://ds-overdesign.com/transform/matrix3d.html available for GSAP ?
- The curved line reveal, I'm a bit uncertain there how to get this working in GSAP Any good places to start looking ?
Seems to be very good on framerates even on slower hardware; ofcourse the animation is only at half of the process