CSS Animations: Workflow Issues Exposed [Includes Videos]

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

See the Pen GSAP: Full Version Complete by GreenSock (@GreenSock) on CodePen.

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.

Challenge!

Still not convinced that GSAP is better suited for professional animators? I'm very interested to see how this animation can be built more effectively. Are you in the CSS-Purist camp? Do you prefer to trigger animations with JavaScript setTimeouts? Maybe you have another library that blows GSAP away. Dig in and build the animation I've been using with your own choice of tools. Below are some resources that should make it easy to get started. When you're done, just drop us a line in the comments or in the forums. Full storyboard showing css values for each key frame: http://codepen.io/GreenSock/pen/DzHBs Starter Pen: http://codepen.io/GreenSock/pen/EsAvF Recommended reading: