Published on <a href="https://blog.prototypr.io/recreating-a-popular-gif-from-dribbble-using-nothing-but-framer-3cf933c43e8d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>13 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/400/1*ym79cM1-yPovsK9Kha4CYg.gif">
<h3>N° 13 — Interactive Beard Scale</h3>
<blockquote><a href="https://framer.cloud/ZirqB">https://framer.cloud/ZirqB</a></blockquote>
<h4>Design</h4>
First things first: Credit for this concept and design go to the wonderful illustrators at <a href="https://www.2dudestudio.com">2Dudes Studio</a>. I was browsing dribbble.com the other day and came across their post entitled <a href="https://dribbble.com/shots/4106340-Beard-Scale">Beard Scale</a> and loved it. I immediately thought it would be fun to prototype in Framer.
It might surprise you that I was able to design the entire thing in Framer. Their design tools are supurb. For the most part, I really enjoy working in Framer. They have nailed the interplay between mocking up UI and using it to create interactive prototypes.
In this particular prototype, the only design element I couldn’t accurately reproduce was a radial gradient. But, radial gradients aren’t exactly something I need when I’m designing your typical UI, so I won’t hold that against Framer.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*l4KhyU7AjhMpX0gAo8x-Wg.png">
One feature that was helpful while designing (and coding) was that Framer played the animated GIF in my workspace. You can see the original Dribbble post to the right of my artboard above. And it was just looping the entire time, making it easier to see what elements I still needed to create.
<h4>Code</h4>
The code to bring 2Dudes’ Beard Scale to life was actually pretty straightforward and simple. First, I enabled dragging on the slider knob and set some dragging parameters. Next I created some simple integer variables for key points along the knob’s path. Then, I put all 32 of my Utils.modulate commands in my knob.onDrag function.
<pre>knob.draggable.enabled = true knob.draggable.vertical = false knob.draggable.constraints = width: 303 x: 36 knob.draggable.overdragScale = 0.1</pre>
<pre>knobStart = 36 knobEnd = Screen.width-36 knobQuarter = 75 knobHalf = 170 knobThreeQuarters = knobQuarter*3</pre>
<pre>knob.onDrag -&gt; track.width = Utils.modulate(knob.x, [36,Screen.width-36], [12,303], true) ears.y = Utils.modulate(knob.x, [knobStart, 120], [175,185], true) ...</pre>
Most of my effort for this prototype was figuring out how many of the Utils.modulate declarations needed to interact with each other. For example, one of the first animations that occurs is the character’s mouth shrinking:
<pre>mouth.width = Utils.modulate(knob.x, [knobStart, knobQuarter], [130, 40], true)</pre>
Basically, the width of the mouth is changing based on the knob’s x-position. When the knob’s position is between my knobStart and knobQuarter variables, the mouth width varies between 130px and 40px, respectively. The boolean at the end limits the mouth width to be only within those two values.
The trick here is the teeth. The teeth are supposed to slide out of view, which is easy enough by changing their y-position. But unless you also change their x-position, you get something that doesn’t look quite right, like this:
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*rfTSY2fhJyDxI_RZvZML3Q.gif">Notice how the teeth are moving left to right as they slide out of view? Yeah. That’s not natural.
What’s happening here is that the teeth, because they reside within the mouth frame, are positioned relative to the mouth. I needed to compensate for that by moving the teeth to the left at the same rate that the mouth is shrinking. I did something similar when I prototyped the <a href="https://blog.prototypr.io/user-framer-to-recreate-the-focused-inbox-toggle-in-outlook-for-android-e7b4043f51d1">Focused Inbox Switch in Microsoft’s Outlook app for Android</a>. Here’s the code, followed by how it looks:
<pre>mouth.width = Utils.modulate(knob.x, [knobStart, knobQuarter], [130, 40], true) teethTop.x = Utils.modulate(knob.x, [knobStart, knobQuarter], [8, -37], true) teethBottom.x = Utils.modulate(knob.x, [knobStart, knobQuarter], [8, -37], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*zwQquPNiSttBHJ7s3QKiyw.gif">Now the teeth are doing exactly what they should.
<h4>Lesson Learned</h4>
With regards to the Utils.modulate functionality in Framer, their documentation states that the boolean property at the end of that method is optional. For me, especially working on this prototype, it was critical. The default is false, which has worked fine for me in the past. But here, without limiting the range of the effect to the specified values, I ran into some strange behavior…
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*E16jXCCs-8bCDASMIRcDpw.gif">
Removing the true at the end of statement for that eyebrow’s y-position removed it’s lower limit. And since it’s animation doesn’t start at the beginning, well—you get the idea.
<h4>Go Check Out This Prototype</h4>
Feel free to download my prototype and poke around in the code a bit (the link is repeated below). Just remember, prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
2Dudes’ Interactive Beard Scale <a href="https://framer.cloud/ZirqB">https://framer.cloud/ZirqB</a>
Thanks for following me in my journey to 100 prototypes. I hope you enjoy my little experiments with Framer. If you have any ideas of something you’d like to see me prototype, let me know with a comment. You can also find me on Twitter @toddjreynolds.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3cf933c43e8d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/recreating-a-popular-gif-from-dribbble-using-nothing-but-framer-3cf933c43e8d">Recreating a Popular GIF from Dribbble Using Nothing but Framer</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.

Recreating a Popular GIF from Dribbble Using Nothing but Framer

13 of 100

Top Stories