Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

CSS Animations: Workflow Issues Exposed [Includes Videos]


| GreenSock
30799

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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?

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:

Get an all-access pass to premium plugins, offers, and more!

Join the Club



User Feedback

Recommended Comments

Killer post! I had a Snorkl.TV Flashback for a moment when I saw the word CHALLENGE! :) The Code Pens are proving to be invaluable. Thanks guys - P
Link to comment
Share on other sites

I would say it is more of a response to those that took issue with the comparison to begin with. This is a presentation showing in detail the difference and why CSS is not always better.
Link to comment
Share on other sites

I am a former actionscript animator / developer and have jumped ship. I can say that it is so unituitive creating css animations. It is so stifling - breaking the process and an animator knows this is bad news for a slick experience. We don't really care so much about some things but I can tell you what IS important to me: works cross browser performs in a slick manner - outside that I don't care ! provides a fast workflow provides an intuitive workflow
Link to comment
Share on other sites

Guest Being wrong is a skill | Jellyvision Technology

Posted

[…] weighed the advantages and disadvantages of each solution. Jack and Carl provided numerous usage scenarios where JavaScript proved to be both more performant and effective than CSS for animation. Check out […]
Link to comment
Share on other sites

Guest Being wrong is a skill | Jellyvision Department of Technology and Otters

Posted

[…] weighed the advantages and disadvantages of each solution. Jack and Carl provided numerous usage scenarios where JavaScript proved to be both more performant and effective than CSS for animation. Check out […]
Link to comment
Share on other sites

I have used greensock for years, in both as and now in js. In my opinion, there is literally no way to compare CSS3's clunky syntax, unintuitive and vendor-specific markup and general crappiness to the clean elegance of Greensock. I have recently been using Greensock + SnapSVG and let me tell you, it's amazing!
Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×