Myth Busting - CSS Animations vs. JavaScript


Greensock (GSAP)- jquery - css 3  animations
                                 
Conversionpoint
evilqubit      






Once upon a time, most developers used jQuery to animate things in the browser. Fade this, expand that; simple stuff.


projects got more aggressive...




The most widely-acclaimed solution was CSS Animations (and Transitions).  CSS Animations have been talked about endlessly at conferences where phrases like "hardware accelerated" and "mobile-friendly" .



Tickle the ears of the audience.




JavaScript-based animation was treated as if it was antiquated and "dirty". But is it?



Lack of independent scale/rotation/position control




 







what if you want to animate "rotation" and "scale" independently, with different timings and eases? Maybe an element is continuously pulsing (oscillating scale) and you'd like to rotate it on rollover
Thats only possible in javascript  !


 

Greensock 



available for free download at 


http://www.greensock.com/

Performance



CSS animations against jQuery

So

 The reason JavaScript animation got a bad reputation is what I call the "jQuery factor"


BUT



what about GSAP  ?


The newer GSAP is also JavaScript-based but it's literally up to 20x faster than jQuery

Still !



Css3 is hardware accelerated !


GPU involvement !


Modern browsers try to offload those tasks from the CPU to the GPU






But did you know you can do that with JavaScript too?



Setting a transform with a 3D characteristic (like translate3d() or matrix3d()) triggers the browser to create a GPU layer for that element. So the GPU speed boost is not just for CSS animations - JavaScript animation can benefit too!

yet

The other part of "hardware acceleration" has to do with being able to use a different CPU thread for animation-related calculations ( only properties that don't affect document flow can truly be relegated to a different thread ) transform an opacity

Performance comparison

Crank up the number of dots and see how jQuery, GSAP, and Zepto compare .



Even though GSAP was faster than CSS3 transitions in the majority of our real-world tests, it’s still true that 3D transforms and opacity tweens are faster with CSS3 transitions and it’s possible that browsers will be able to further tap into hardware acceleration in the future, so we’ll call this round a tie. Feel free to build your own tests to see how things compare in your workflow.






 Performance winner: TIE

Controls


Using CSS keyframes animation, You cannot seek to a particular spot in the animation, nor can you smoothly reverse part-way through or alter the time scale or add callbacks at certain spots or bind them to a rich set of playback events





Controls winner: GSAP

Workflow


The workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels

GSAP wipes the floor with CSS transitions in this round :

  • Allows animations to be nested inside other animations as deeply as you want
  • Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc.
  • Callbacks for when an animation starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks






Workflow winner: GSAP


Compatibility



CSS-based animation doesn't work in IE9 and earlier. Most of us hate supporting older browsers (especially IE), but the reality is that some of us have clients who require that support.


Compatibility winner: GSAP

Limited effects


You can't really do any of the following with CSS animations: 

  1. Animate along a curve (like a Bezier path). 
  2. Use interesting eases like elastic or bounce or a rough ease. There's a cubic-bezier() option, but it only allows 2 control points, so it's pretty limited.
  3.  Use different eases for different properties in a CSS keyframe animation; eases apply to the whole keyframe.
  4.  Physics-based motion. For example, the smooth momentum-based flicking and snap-back implemented in this Draggable demo. 
  5. Animate the scroll position
  6.  Directional rotation (like "animate to exactly 270 degrees in the shortest direction, clockwise or counter-clockwise").
  7.  Animate attributes.





CSS animations "bad"? Certainly not. In fact, they're great for simple transitions between states (like rollovers) when compatibility with older browsers isn't required.

I'd encourage you to do your own testing to see which technology delivers the smoothest animation in your particular project(s). Don't buy the myth that CSS animations are always faster, and also don't assume that the speed test above reflects what you'd see in your apps. Test, test, test.








Simon Tadros 
Made with Slides.com