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!