Designing Micro-interactions: Loading Animation
An ongoing series on creating animations in Framer.
A loading animation is a useful way to manage wait times for the user. It gives you an opportunity to surprise and delight while still maintaining your brand’s aesthetic. In this tutorial, you’ll learn how to manage a series of animations that happen in order.
Step 1: Create a prototype in Design mode
Create a simple button with four sublayers: a progress bar and three icons for different states. I designed my button with an upload icon visible, a progress bar at the bottom (with a width of 0), and two more hidden icons.
To make the layers you designed usable in the Code tab you have to enable targeting. You can do this by clicking on and renaming the button and icon layers in the panel.
Step 2: Add an event
You can prototype this entire project without writing a single line of code—just use Framer’s Auto-code features.
First, add an event. We will trigger the whole interaction with a tap on the button layer:
This is the code Framer writes for you:
button.onTap (event, layer) ->
Step 3: Design animations
We will use Framer’s Auto-code features to design all animations. Notice how we use the left menu to write the initial line of code and then refine properties like size, position, etc. directly in the Preview window:
I’ve designed four animations with different timing:
- The first animation changes the width of the progress bar.
- The second hides the upload icon with opacity.
- The third rotates and shows the loader icon.
- The last one shows and scales the check icon.
Here is the code that Framer wrote for each of these animations:
# change progress bar width
# hide upload icon
# show and rotate loader icon
# show and scale check icon
Step 4: Reset loading animation
As you may have noticed, we didn’t hide the loader icon after the animation finishes. To finish this prototype, trigger another animation using this event:
This tutorial was originally published at www.toptal.com. Toptal is an exclusive network of the top freelance software developers, designers, and finance experts in the world. Many large companies rely on Toptal freelancers for their most important projects. Check out the top 3% of Framer-proficient designers on Toptal and hire one today!