Hey there! You're using an out-of-date browser, so this site probably looks pretty funny. Upgrade your browser for the full experience.
creative south swag

After Effects & CSS – learn both!

Adobe After Effects and CSS Keyframes might seem like different worlds, but learning both can help your team bridge a big communication gap.

“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 

 

Born and raised in
Louisville, Kentucky.

502.498.8470

223 S. Clay St

Work With Us

  • This field is for validation purposes and should be left unchanged.