Published on <a href="https://blog.prototypr.io/using-framer-to-prototype-a-pull-down-to-close-micro-interaction-4a7aa1351ab8?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>11 of 100</h4>
My goal is to create 100 prototypes of interactions from some of my favorite apps. I know my way around Framer a little bit, but there is always room for improvement. Using Framer to recreate existing apps should be an effective way to practice and refine my craft.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*EgKZMxTZ1yR6kvTaKgmM6w.gif">
<h3>Nº 11 — Pull-Down-to-Close Micro Interaction</h3>
<blockquote><a href="https://framer.cloud/MjgJL">https://framer.cloud/MjgJL</a></blockquote>
If you read <a href="https://blog.prototypr.io/using-framer-to-experiment-with-spring-animation-curves-in-the-app-stores-today-view-9c7780f3256e">the write-up of my 10th prototype</a> you might recall my frustration at being unable to incorporate the interaction whereby you can pull down on an article and it shrink back into its origina place, effectively closing the article. I used this mini prototype to solve the issue that prevented me from including this functionality in the previous prototype.
<h4>Design</h4>
Not much to see here. A purple box. A red button. And a close button that is hidden by default. I started without the red button, but it became a crucial piece of the puzzle, as I’ll explain below.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7m9-zJ8MNyPsreWooGLw0w.png">This entire prototype was designed in Framer! 😉
<h4>Code</h4>
My goal for this prototype was to tap the small box, causing it to expand to fill the entire screen. Then, once in that full screen mode, gradually modify the box when pulling the object down. Lastly, on release of the drag, the box would finish animating to its original position.
First I set up my full screen state. I repositioned the x and y of the box, changed the height and width, and updated the borderRadius to 0:
<pre>rect.states.full = x: 0 y: 0 width: Screen.width height: Screen.height borderRadius: 0</pre>
After adding a tap interaction on the box (remember, no red button initially) to check that my states were working correctly, I added the ability to drag the box. I wanted the box to be draggable when in full screen mode, but not in it’s closed/initial state.
With the dragging interaction enabled, I set up my modulations. I’m telling you, if there’s one thing that will take your Framer prototypes to the next level it’s <a href="https://framer.com/docs/#utils.modulate">Utils.modulate</a>. Using this function allowed me to gradually change all of the properties of the box depending on it’s y-position. In other words, as you drag the box down and it’s y-position increases, it affects the x-position, the height, the width, and the borderRadius.
<pre>rect.onDrag -&gt; rect.width = Utils.modulate(rect.y, [258,0],[220,Screen.width], true) rect.height = Utils.modulate(rect.y, [258,0],[220,Screen.height], true) rect.x = Utils.modulate(rect.y, [258,0],[97,0], true) rect.borderRadius = Utils.modulate(rect.y, [258,0], [14,0], true) closeBtn.opacity = Utils.modulate(rect.y, [258,0],[0,1], true)</pre>
Next, I implemented a state animation on the box when dragging ended. Tapping the close button also animated the box to its default state.
<pre>closeBtn.onTap -&gt; rect.animate("default") closeBtn.animate opacity: 0 rect.draggable.enabled = false</pre>
<pre>...</pre>
<pre>rect.onDragEnd -&gt; rect.animate("default") closeBtn.animate opacity: 0 rect.draggable.enabled = false</pre>
Once all of that was in place I was experiencing some similar problems. Namely, the box was still draggable after it closed. Then I realized that Framer is interpreting my drag as a touch as well. To solve for this I added my “viewMore” button. Having the button gave me an explicit target to touch to expand the box. Then, dragging on the box itself worked in that dragging was disabled onDragEnd.
Basically, I had conflicting functionality tied to interacting with my box. Adding the button cleared everything up. Here is all of the code for this mini prototype:
<pre>Framer.Defaults.Animation = time: 0.5 curve: Spring(damping: 0.6, mass: 1.2)</pre>
<pre>fullWidth = Screen.width fullHeight = Screen.height</pre>
<pre>viewMore.states.off = opacity: 0 x: 168 y: 652</pre>
<pre>rect.states.full = x: 0 y: 0 width: fullWidth height: fullHeight borderRadius: 0</pre>
<pre>viewMore.onTap -&gt; rect.animate("full") viewMore.animate("off") closeBtn.animate opacity: 1 rect.draggable.enabled = true rect.draggable.horizontal = false closeBtn.onTap -&gt; rect.animate("default") viewMore.animate("default") closeBtn.animate opacity: 0 rect.draggable.enabled = false rect.onDrag -&gt; rect.width = Utils.modulate(rect.y, [258,0],[220,fullWidth], true) rect.height = Utils.modulate(rect.y, [258,0],[220,fullHeight], true) rect.x = Utils.modulate(rect.y, [258,0],[97,0], true) rect.borderRadius = Utils.modulate(rect.y, [258,0], [14,0], true) closeBtn.opacity = Utils.modulate(rect.y, [258,0],[0,1], true) viewMore.opacity = Utils.modulate(rect.y, [258,0],[1,0], true) viewMore.y = Utils.modulate(rect.y, [258,0], [110,652], true) viewMore.x = Utils.modulate(rect.y, [258,0], [71,168], true)</pre>
<pre>rect.onDragEnd -&gt; rect.animate("default") viewMore.animate("default") closeBtn.animate opacity: 0 rect.draggable.enabled = false</pre>
<h4>Lesson Learned</h4>
I love tinkering with micro interactions like this. It’s a little like prototype sandboxing. By looking only at the specific interaction I’m trying to work through, I can create a working proof-of-concept that I can refer back to for future projects. Another advantage to sandboxing like this is that it’s easier to isolate variables that might be causing bugs. In this case, the issue was overlapping functionality.
Another bug I ran into this time was the positioning of the red button. For some reason it worked as expected for the first open-close cycle. But after that, it was flying out of view to odd places. After a little investigation, I explicitly set its x- and y-position in its “off” state.
<h4>Go Check Out This Prototype</h4>
If you’d like to learn more, please download my prototype and poke around in the code a bit (the link is repeated below). But don’t judge me — prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
Pull-Down-to-Close Micro Interaction <a href="https://framer.cloud/MjgJL">https://framer.cloud/MjgJL</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4a7aa1351ab8" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-prototype-a-pull-down-to-close-micro-interaction-4a7aa1351ab8">Using Framer to Prototype a Pull-Down-to-Close Micro Interaction</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Framer to Prototype a Pull-Down-to-Close Micro Interaction

11 of 100

Top Stories