After Effects & CSS - learn both!

“I’d like it to jump up, wiggle a little bit, and then like.. Explode into fireworks?”

That isn’t a real quote, but you get the sentiment. It can be difficult for designers and developers to effectively talk about animation. The gap between design software and CSS/JavaScript animation is just too big to bridge, right?

At Creative South 2018 I attended a workshop on Adobe After Effects given by Ayana Campbell Smith to try and see if we couldn’t find a more efficient way to implement animation in our web projects. It was a pretty basic overview, but as a developer, I hadn’t worked with animation software at all before. What I found out, though, was that the gap really wasn’t that large to begin with. Most of the properties that are commonly animated in CSS keyframes (opacity, position (transform!), rotation, scale) are pretty darn close to how you animate in AE. They even both position things against an XY axis.

Having a designer mock up their animation idea in After Effects and either a) being able to give explicit direction (40 pixels up, 40% opacity after 2 seconds) or b) handing them over to a developer versed in After Effects will get you a more accurate animation based on your design in a shorter time span.

Obviously animations can get much more complex than just fading away, or sliding to the right, but most UI animations you’ll encounter are just a combo of those properties. Here are a few extra pointers to get you moving onto more complex experiences:

• CSS Keyframes can have multiple frames (from 2-100) and can animate multiple properties at once.
• CSS Animations also have a ton of customizations such as timing functions and iteration count
• In design, it is best practice to group paths that will animate together, that way you can move an entire head left and right, instead of the face, hair, eyes, nose, mouth, ears, and beard.
• Have a specific animation timing in mind? CSS animation timing functions can take simple (ease, ease-in-out) timing functions and customizable cubic beziers. Here’s a fun tool to help define a cubic bezier