Process

Apply the practices, tools and translation tips for establishing your own animation workflow.

Iterate and Implement

Work as a whole team to move animations from a pencil sketch to a delightful user experience.

Animation of a prototype in different stages with hands in between Animation of a prototype in different stages with hands in between

Best practices

The number one representing the first step in a process The number one representing the first step in a process

Articulate the value of animation in your UI

Whether you are working with wireframes, a hi-fi mockup or code, take time to articulate key interactions in the interface where applying animation could enhance or augment the experience. Documenting these interactions regularly and all in one place will help prepare your team for identifying and prioritizing which animations are most important to design first.

A page with sections highlighted in teal A page with sections highlighted in teal
The number two representing the second step in a process The number two representing the second step in a process

Select a tool, start with basics and build out

Once you’ve clearly articulated the value of adding motion to a specific interaction, select a tool that you’re comfortable with to begin thinking through how you want a single object to move. Use the properties like position or scale in simple transitions paired with fundamentals like timing and spacing. Some people might prefer paper and pen to start, others may want to explore in code with simple shapes.

A page with an arrow pointing left, implying some of the sections in green are moving left A page with an arrow pointing left, implying some of the sections in green are moving left
The number three representing the third step in a process The number three representing the third step in a process

Iterate on the in-betweens and evoke the style

Now that you understand what type of animation you want to design, it’s time to create many versions of it using a variety of tools - trying out different rates of speed, easing, and hierarchy, to name a few. Prototype the nuances of the “in-betweens” and the hero shot, exploring different concepts for the style.

A page with a section displaced from the other sections, and a sample movement path in a right column A page with a section displaced from the other sections, and a sample movement path in a right column
The number four representing the fourth step in a process The number four representing the fourth step in a process

Place a prototype in your users’ hands

Get feedback from users on the overall feel and timing of the animations. Be sure to test the animations against accessibility guidelines to make sure that your animations can be enjoyed and controlled by everyone.

A mobile device with two sections pointed out, one with a check mark and one with an ex A mobile device with two sections pointed out, one with a check mark and one with an ex
The number five representing the fifth step in a process The number five representing the fifth step in a process

Translate feedback and make adjustments

Synthesize the insights from your user testing and work on fine-tuning the details of your design. Unless you’re scrapping a design and starting over, it may be easier to tweak small changes with your developer in the code instead of adjusting a video or prototype.

A page with writing on the left and a picture of a mobile device on the right A page with writing on the left and a picture of a mobile device on the right
The number six representing the sixth step in a process The number six representing the sixth step in a process

Bring animations to life on the glass with code

Build a good relationship with your developers and engineers and get them looking at your designs from the start. Getting a great animation on the screen often requires many conversations to drive the meaning into the movement. You may have to make modifications to ensure feasibility.

A hand holding a phone and sliding one section with the thumb A hand holding a phone and sliding one section with the thumb

Tools

Three screens, the top of which has three sample mobile screens with green sections highlighted Three screens, the top of which has three sample mobile screens with green sections highlighted

Sketching

Animation can be prototyped as soon as you have sketches of an interface. Sketching in-betweens can provide an idea of how the interface will transition from one state to another.

Adobe Photoshop

Photoshop can create low-fidelity animated gifs that aid in communicating the idea of animation through a sequence of mockups. It’s a great tool for implementing animation to a product that has previously been mocked up in Photoshop.

A screen with a sample mobile devide screen on the left and editing options on the right A screen with a sample mobile devide screen on the left and editing options on the right

Keynote

With Keynote, you can create mid-fidelity animations by using “magic move” and other built-in animation effects. Begin to prototype and refine the movement and timing of animations at an early stage.

Adobe After Effects

With After Effects, you can create high-fidelity animations with no interaction. It is great for showing a high-fidelity concept, but it can create animations that might not be feasible when it comes to production.

Axure RP

With Axure RP, you can create mid-fidelity animations by using built-in animation effects. Similar to Keynote, the timing of animations can be refined.

Framer

Framer is a prototyping tool for desktop and mobile animation, but requires development knowledge. Framer doesn’t produce production-ready code, but is good for designing microinteractions.

Adobe Edge Animate

With Edge Animate, you can create high-fidelity animations with the capability to add fundamental interaction. Edge exports to HTML & JavaScript, but most of the time, it is not production-ready code. It can also be difficult to import Illustrator or Photoshop mockups to animate.

Origami

Origami is a framework built on top of Quartz Composer. Similar to Framer, it has very powerful animation tools that are good for designing microinteractions. Origami is especially useful for mobile prototyping.

Two screens, the left has text and the right has an image of a mobile device Two screens, the left has text and the right has an image of a mobile device

CSS

CSS can create high fidelity animations with production-ready interactions. CSS is great for both the prototyping and production of animations.

Swift

Swift is the programing language for iOS and OS X. Swift creates iOS production animations.

JavaScript

JavaScript can create high fidelity animations with production-ready interactions. JavaScript has many libraries that make working with interfaces elements like SVG’s easy, like Snap.svg or GSAP.

Quartzcode

QuartzCode is an animation tool that allows you to iterate with many animations at once. It automatically generates Swift or Objective-C code in real time to be used for iOS or OS X projects.

Prototype

When implementing animation, designers and developers must have a shared understanding to move their concepts from prototype to production. The translation from concept to code is achievable with a flexible mindset, as there are many different ways to code an animation.

The following simple steps provide a common approach for collaboration, no matter the tools. Keep in mind, the most common variables that need to be defined are object properties, duration, keyframes, timing functions and delays.

Apply animation properties

Properties are the qualities of an object that are subject to change over time. The following properties are based off the building blocks.

Let’s take a look at the top navigation example to spot the changing properties in action. The height of bottom bar graphic grows on hover. Then, it slides horizontally between the links. Once clicked, the bar graphic grows in height. The properties used in this animation are scale and position.

Once the properties are documented, this will act as the base for the variables that will be defined within keyframes. Extracting keyframes is as simple as watching the animation and documenting the critical times where a variable changes.

Define keyframes

Keyframes are states used to set parameters (a number value) for different types of properties (like position, scale, opacity, rotation, etc.) that define the beginning and the end of a single action.).

Developers frequently write keyframes as percentages, which differs from a keyframe that is referenced by a frame number or timeline. Translate keyframes into percentages so that the entire animation can be scaled in time to be slower or faster.

Based on the top navigation example above, here are three examples of how the variables change over time:

Frame 1: Height grows 6 pixels

Frame 2: Horizontal transform

Frame 3: Height grows 100%

When extracting keyframes from After Effects or another other keyframe based application, viewing the timeline can make the process easier and more exact.

Movements will be reacting based off of state changes. Define the start and end properties within the CSS. For the top navigation example, the class changes are being handled by JavaScript. This means that all the animation is defined in CSS and JavaScript will trigger them.

nav ui li:hover {
height : 6px ;
transform : translateX (0 ) ;
}
nav ul li:active {
height : 100% ;
}

Within CSS, the keyframes values are defined within each class. A CSS transition is handling the timing function, the order in which the properties are changing, and the duration of the animation.

For more complex animations that require more than just a “to and from”, the CSS keyframe technique would be used. Defining animation transitions and keyframes may differ between programming languages, but the core concept of defining properties and states over time remains constant.

Duration

After you’ve determined your keyframes, start defining the duration of the animation. Duration is the length of time an animation lasts. Take usability and interaction into consideration when deciding the length of your animation. The duration of the animation should complement the interaction it is representing, and should feel natural and responsive to the users’ touch.

Calculate duration based off of the frames per second (FPS), how many frames it takes for an animation to complete. In an After Effects file, you can find the frame rate within the composition setting (Command + K). For QuickTime videos, the frame rate can be found within the inspector (Command + I).

Frames
Frame rate
=
Seconds

Timing function

Now that you’ve set the foundation for creating a working animation, use timing functions to put the finishing touches on your work. Timing functions are mathematical equations that create a bezier curve, a line that defines the acceleration pattern on a graph.

There are many resources online to create a timing function, like cubic-bezier.com.

If you need to extract timing functions from a video, refer to the Timing section for an understanding of what easing curves might fit within a given animation. It helps to play the video and the working product side by side to examine the timing functions.

A cubic bezier on a grid(.8,0,.2,1) A cubic bezier on a grid(.8,0,.2,1)

Cubic Bezier

Back to top