Making the transition from animating in After Effects to CSS.
I started my dive into software design a couple years ago by creating demo videos and animating user interfaces. Coming from a Motion Design background, After Effects was my baby, and I had spent many years perfecting that craft. I have worked side by side with developers re-creating the animations that I had created in After Effects. This process was slow and tedious — there was a need for the designer and developer to sit next to each other and hash out the details.
I wanted to improve this workflow, so I dove into the research to understand how animations work within development and what the mental model was in which I needed to adapt to. After Effects was my baby but I needed to let it go and understand the new tools at my disposal. Here are some of the key findings I found that an After Effects motion designer needs to understand if their animations will ultimately be in code.
1. Understand the Limitations
The world of development is constantly changing. As an animator, one needs to be up to date on the current web standards and restrictions for animations.
Understand the Properties at your disposal.
Basic List of Animatable Properties:
In After Effects you have to consider the render time of your animations. You have to do the same for code — you have to think about the performance of an animations.
Properties that are performat:
Here is a great article by Paul Lewis and Paul Irish about High Performance Animations.
Push the limits:
Continue Reading on Medium.