Crank up the number of dots and see how j Query, GSAP, and Zepto compare.Since Zepto uses CSS transitions for all of its animations, it should perform best, right?The following is a guest post by Jack Doyle, author of the Green Sock Animation Platform (GSAP). Flash faded away and talented animators pressed HTML5 to do things it had never done before. The most widely-acclaimed solution was CSS Animations (and Transitions).Jack does a lot of work with animations in the browser and has discovered that the generic opinion that "CSS is faster" just isn't true. They needed better tools for complex sequencing and top-notch performance. The darling of the industry for years now, CSS Animations have been talked about endlessly at conferences where phrases like "hardware accelerated" and "mobile-friendly" tickle the ears of the audience.“Gnomon is the best school for 3D art and I’m so glad I attended.The classes are challenging but absolutely worth the commitment.
The stress test below creates a certain number of image elements (dots) and animates them from the center to random positions around the edges using random delays, creating a starfield effect.The secret is to isolate the animated elements onto their own GPU layers because once a layer is created (as long as its native pixels don't change), it's trivial for the GPU to move those pixels around and composite them together.Instead of calculating every single pixel 60 times per second, it can save chunks of pixels (as layers) and just say "move that chunk 10 pixels over and 5 pixels down" (or whatever).As someone who's fascinated (bordering on obsessed, actually) with animation and performance, I eagerly jumped on the CSS bandwagon.I didn't get far, though, before I started uncovering a bunch of major problems that nobody was talking about. This article is meant to raise awareness about some of the more significant shortcomings of CSS-based animation so that you can avoid the headaches I encountered, and make a more informed decision about when to use JS and when to use CSS for animation.