Go to Fox Pass home

Our animation workflow

Explore our iterative approach to UI animations, enhancing user experience with dynamic, engaging designs.

karthik
Explore our iterative approach to UI animations, enhancing user experience with dynamic, engaging designs.

Whether it's a micro-animation to add delight or show feedback for an interaction, or a longer showreel of our work - without a process the task could end up taking an excessive amount of time, or the end result might be misaligned with the original goals. In this article, we delve into the details of the process we follow in our work.

Start with a Storyboard

Storyboard of MKBHD’s iphone 15 pro video Storyboard of MKBHD’s iphone 15 pro video source: https://twitter.com/b_hvrd/status/1707517327799996532

Storyboards are equivalent to wireframes in our animation flow. In this stage, we plan out the sequence of events and break down the animation. This step helps in bringing everyone on the same page as it provides a tangible representation of the animation. It also helps us identify and prepare the assets.

Storyboard of a select state micro-animation from one of our projects Storyboard for a Select state micro-animation from one of our projects

Create a draft version
Draft version of the above storyboard

In the first stage of animation, we focus on working on the broad strokes of the animation, just getting the sequence of events and transitions right but not focusing on details. This step helps with two things:

  1. Validate if our concept serves the purpose correctly: For example, does this animation work to acknowledge a success state but not make it too celebratory
  2. Identify the right details: For example, when a screen has a lot of moving parts, adjust the duration so that the user can process the event happening on the screen.
Working on details
Final version of the earlier animation

This is the final step where we focus on details. We adjust the easing graph, add additional details that were identified in the draft version, and once the final version is ready, we prepare and export the Lottie/Rive files and hand them off to developers. Before the handoff, we upload our animations to lottiefiles.com and fix any issues that come up.

After Effects Resources

Here are some of resources we use for creating Lottie animations in After Effects

  1. After Effects features supported in Lottie
  2. Bodymovin After Effects plugin
  3. AEUX plugin to Export Figma to After Effects
  4. Flow a simpler Graph Editor plugin for After Effects (Paid)
  5. Material 3 After Effects easing plugin
We are your team!

We are taking up new engagements across user research, product design, and web & editorial design.

Do you or someone you know needs amazing digital experiences researched and designed? Write in now.

image of a letterbox with fox pass sticker