small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://blog.framer.com/designing-micro-interactions-swipe-to-delete-b533436b02d9?source=rss----a40a6ad4b5fc---4">Framer &#8211; Medium</a> | Wojciech Dobry </p>
<h4>An ongoing series on creating animations in <a href="https://framer.com/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=wojiech_swipetodelete&amp;utm_content=subtitle">Framer</a>.</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hP84EnBLZ8RpJgr-R5zLfw.png"></p>
<p><em>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 </em><a href="http://framer.com/download?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=wojiech_swipetodelete&amp;utm_content=intro"><em>download</em></a><em> a free 2 week trial. Check out the rest of the posts in this series:</em></p>
<p><a href="https://blog.framer.com/framer-tutorial-from-design-to-code-components-and-beyond-d2b147838167">Framer Beginner Tutorial: From Design to Code, Components and Beyond</a></p>
<p><a href="https://blog.framer.com/creating-microinteractions-in-framer-f1453b9dc9e7">Designing Micro-interactions: How to Design an Action Button</a></p>
<p><a href="https://blog.framer.com/designing-micro-interactions-an-interactive-switch-3489ff600486">Designing Micro-interactions: How to Design an Interactive Switch</a></p>
<p>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: <a href="https://framer.cloud/rzMWP">https://framer.cloud/rzMWP</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/578/0*h8m2EdNnC-EUtRhB.gif"></p>
<h4>Step 1: Create a prototype in Design mode</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_EvPdfsSTTzxGvRt.png"></p>
<p>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.</p>
<h4>Step 2: Make items draggable</h4>
<p>To keep it simple, we will create an interaction only for the first list item. First, make the list item draggable: item.draggable = true.</p>
<p>Then lock the vertical axis: item.draggable.vertical = false.</p>
<p>Set up the constraints of the draggable area: item.draggable.constraints</p>
<p>And finally set the size to the item size: size: item.</p>
<p>This is how the whole code looks:</p>
<pre>item.draggable = true<br>item.draggable.vertical = false<br>item.draggable.constraints =<br>	size: item</pre>
<p>Now you can swipe left and right, and the item will always return to its original position.</p>
<h4>Step 3: Create state</h4>
<p>Next, create the state for the list item when it’s removed. I simply moved it outside the screen using the x-axis.</p>
<pre>item.states.a =<br>	x: -360</pre>
<h4>Step 4: Change state after swipe</h4>
<p>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:</p>
<pre>item.onMove -&gt;	<br>	if item.x &lt; -70<br>		item.stateCycle("a")</pre>
<p>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: <a href="https://framer.com/getstarted/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=wojiech_swipetodelete&amp;utm_content=body#conditional">https://framer.com/getstarted/programming/#conditional</a></p>
<h4>Step 5: Undo action after tap</h4>
<p>We are almost done with this interaction. The only thing left is to undo this action:</p>
<pre>item_bg.onTap -&gt;<br>	item.stateCycle("default")</pre>
<p>You should be familiar with this code from the previous tutorial.</p>
<h4>Step 6 (optional): Adjust animation timing</h4>
<p>If you would like, you can adjust the timing of the animation:</p>
<pre>item.animationOptions =<br>	time: 0.75<br>	curve: Spring</pre>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fd6e109%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Fd6e109%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/3db285a78951b132b9784d718c537561/href">https://medium.com/media/3db285a78951b132b9784d718c537561/href</a></iframe></p>
<p><em>This tutorial was originally published at </em><a href="https://www.toptal.com/designers/framer-js/framer-tutorial-creating-prototypes"><em>www.toptal.com</em></a><em>. 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</em><a href="https://www.toptal.com/designers/framer-js"><em> top 3% of Framer-proficient designers</em></a><em> on Toptal and hire one today!</em></p>
<p><a href="https://blog.framer.com/get-organized-with-code-folds-f7b66e212ab4"><img alt="" src="https://cdn-images-1.medium.com/max/900/1*Lw_2md84y5CjYSLFtVigjQ.png"></a><a href="https://www.facebook.com/groups/framerjs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=wojiech_swipetodelete&amp;utm_content=footer2"><img alt="" src="https://cdn-images-1.medium.com/max/265/1*H6W5-QpHqVSRRR2N9NSe3w@2x.png"></a><a href="http://framer.com/download?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=wojiech_swipetodelete&amp;utm_content=footer3"><img alt="" src="https://cdn-images-1.medium.com/max/265/1*WJp-afZyQk72Y14YsubOcQ@2x.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b533436b02d9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.framer.com/designing-micro-interactions-swipe-to-delete-b533436b02d9">Designing Micro-interactions: Swipe to Delete</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing Micro-interactions: Swipe to Delete

Designing Micro-interactions: Swipe to Delete

An ongoing series on creating animations in Framer.

Top Stories

Top Stories