Animation + Frontend Development

After Effects & CSS - learn both!

By:

Natalie Miller

on 6/20/2018

“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

Share to

Related Posts

Tips for creating a Canvas game for Android

By:Nick Stewart on 8/9/2017

With the help of our excellent illustrator Pat, we will soon be releasing Face Paint Peggy, an HTML Canvas game for Android mobile phones. The object of the game is to catch “drops” that are of a certain color, progressing through levels where drops move faster and more drops are on the playing field.

Read More »
Creating Face Paint Peggy

By:Nick Stewart on 4/25/2018

Recently we launched Face Paint Peggy, a simple HTML/Javascript game that showcases the power of creating mobile games with web technology. The game is available on Android and iOS for free.

Read More »