A post by Carl Schooff, GreenSock's "Geek Ambassador"
Hot on the heels of the CSS Myth-Busting article, I'm going to take a deeper look into CSS Animations and how they fit (or don't fit) into a modern animator's workflow. This isn't about simple fades or basic transitions (CSS is great for those); Developers who use animation to tell a story or deliver rich interactivity require a very different workflow than those who are simply doing UI transitions.
I'm going to show you exactly where some of the pain points are for a typical project and how they can bring your workflow to a grinding halt. Even relatively simple animations like the one below can become surprisingly cumbersome with CSS.
Example of a Simple, "Story-Telling" Animation
In the animation above, 5 elements are animated over the course of 7 seconds. This should be pretty easy to create, especially compared to a more complex animation like the one on GreenSock's home page. Building it in pure CSS isn't as easy as you might think. First, I'll show how the percentage-based timing creates problems, and then I'll demonstrate the differences in workflow while building the same animation in CSS and GSAP. You'll see that the GSAP version has:
- Substantially less code
- More accuracy
- Greater flexibility and control
- More enjoyment and room for experimentation
Part 1: Percentage-based Timing
For professional animators, timing is everything. A mere tenth of a second can be the difference between "the perfect organic feel" and "robotic and lifeless". How do animators think about time? In seconds, yet CSS Animations use percentages. How hard can it be to synchronize the animation of just two elements in CSS? Let's find out...
Part 2: Comparison of CSS Animation and GSAP
Watch what's involved with building (and then editing) the "car lift" animation in pure CSS compared to the doing the same thing with GSAP. Big difference, right?
- 0:00 Intro
- 1:47 Planning a CSS Animation
- 3:35 CSS Animation Delays are Inaccurate
- 4:21 GSAP vs CSS Code Comparison
- 6:22 Synchronizing Animations with GSAP
- 11:17 Flexibility of GSAP: Stagger, Seek, and Tweak
- 16:40 Conclusion and Challenge
If you'd like to see the CSS animation-delay sync problem demonstrated, here's a codepen. *note: since publishing this article both FireFox and Chrome have fixed this issue, however, Safari still has some pretty serious synch issues (1-29-2015)
Seriously, You guys are beating up on CSS Animations again?
Really, I'm not trying to be negative for the sake of being negative. It's just that so many developers are looking for animation tools that accommodate their real-world projects and the industry seems to scream "use CSS!" even though the API doesn't adequately serve the workflow of modern animators who are building immersive experiences or animations that "tell a story". Too many people are being led down a path that results in utter frustration, or at least a lot of wasted time. And no, CSS Animations aren't "evil". In fact, sometimes they're perfectly appropriate (see the CSS Myth-Busting article for details).
There are CSS fans who craft animations and proudly shout "Pure CSS! No JS!" as if the grueling effort necessary is a badge of honor. The accomplishment is indeed admirable, and we tip our hats to them. But WOW it's a lot of work and doesn't exactly lend itself to experimentation or easy edits.
Quite simply, we aim to change the tide with tools like GSAP. The majority of the GSAP API has been shaped by feedback from real developers in the trenches over the course of many years. The process of animation should be fun and inspiring.
Full storyboard showing css values for each key frame: http://codepen.io/GreenSock/pen/DzHBs
Starter Pen: http://codepen.io/GreenSock/pen/EsAvF