3 / S C
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 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 for a Select state micro-animation from one of our projects
Create a draft version
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:
- 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
- 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
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
