Designing Micro-interactions: Swipe to Delete
Framer – Medium | Wojciech Dobry
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:
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
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.
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:
if item.x < -70
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:
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:
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!