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.

To follow along, download a free 14-day trial of Framer. Get the prototype for this tutorial here: https://framer.cloud/FxmHN

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
progress.animate
width: 247
options:
time: 1.4
curve: Bezier.ease
# hide upload icon
upload.animate
opacity: 0.00
y: 39
options:
time: 0.2
curve: Bezier.ease
# show and rotate loader icon
load.animate
opacity: 1.00
rotation: 360
options:
time: 1
curve: Bezier.ease
# show and scale check icon
done.animate
opacity: 1.00
scale: 1.4
options:
time: 0.2
curve: Bezier.ease
delay: 1.00

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: load.onAnimationEnd ->

load.animate
opacity: 0.00
options:
time: 0.2
curve: Bezier.ease

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!