Designing Micro-interactions: Swipe to Delete

An ongoing series on creating animations in Framer.

This post is part of an ongoing content partnership between Toptal and Framer, written from the perspective of a new user. If you don’t have Framer, make sure to download a free 2 week trial. Check out the rest of the posts in this series:

Framer Beginner Tutorial: From Design to Code, Components and Beyond

Designing Micro-interactions: How to Design an Action Button

Designing Micro-interactions: How to Design an Interactive Switch

This is a typical interaction for removing, archiving, or saving items from a list. Swipe left or right, and an item will be cleared away. Download the prototype here: https://framer.cloud/rzMWP

Step 1: Create a prototype in Design mode

You can use your own design, if you wish. You just have to keep the same structure of the layers. As you can see in the image above, all of the list items have an “undo” button under them.

Step 2: Make items draggable

To keep it simple, we will create an interaction only for the first list item. First, make the list item draggable: item.draggable = true.

Then lock the vertical axis: item.draggable.vertical = false.

Set up the constraints of the draggable area: item.draggable.constraints

And finally set the size to the item size: size: item.

This is how the whole code looks:

item.draggable = true
item.draggable.vertical = false
item.draggable.constraints =
	size: item

Now you can swipe left and right, and the item will always return to its original position.

Step 3: Create state

Next, create the state for the list item when it’s removed. I simply moved it outside the screen using the x-axis.

item.states.a =
	x: -360

Step 4: Change state after swipe

Finally, we have to create a trigger to start the interaction. When we drag the item to the left side of the screen, it should be removed. The code will look like this:

item.onMove ->	
	if item.x < -70
		item.stateCycle("a")

In this case, we are using an “if” statement. The above code basically says, when we move the item layer more than 70px, then change item state to state ‘a.’ You can read about if statements in the Framer Studio documentation: https://framer.com/getstarted/programming/#conditional

Step 5: Undo action after tap

We are almost done with this interaction. The only thing left is to undo this action:

item_bg.onTap ->
	item.stateCycle("default")

You should be familiar with this code from the previous tutorial.

Step 6 (optional): Adjust animation timing

If you would like, you can adjust the timing of the animation:

item.animationOptions =
	time: 0.75
	curve: Spring

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!