Published on <a href="https://blog.prototypr.io/using-framer-to-prototype-swipe-to-open-transition-on-iphone-x-72eb1fcfaa1f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>16 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/375/1*OIECnGGbKk4LT-NZUhQwbg.gif">
<h3>N° 16 — Swipe to Unlock on the iPhone X</h3>
<blockquote><a href="https://framer.cloud/uNCjd">https://framer.cloud/uNCjd</a></blockquote>
<h4>Design</h4>
Swipe to Unlock coupled with FaceID is such a satisfying experience that I wanted to build on <a href="https://blog.prototypr.io/using-framer-to-recreate-iphone-xs-home-screen-animation-6aea5391c92f">my last prototype</a> and create the swiping transition and it’s parallax and blurring effects.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ag6PR4VKWvYQ8JNOpGRepA.png">
I created the illustration used as the lock screen wallpaper on my iPad Pro using the Apple Pencil and the app Procreate, which is a fantastic app for drawing, illustration, painting, hand lettering, and all of that. I’m certain I could recreate the illustration from scratch in Framer, but it would take a while and I already had the image for the wallpaper. 😉
And, as a side note, if the time ever shows up in my designs, like in a status bar, or on the lock screen in this case, I always set the time to 6:24. June 24th is my wedding anniversary, and it’s a nice subtle reminder to me about my wife and my family and why I go to work everyday.
The two main frames for this design are 1) the lock screen and 2) the home screen, which sits directly beneath the lock screen. But the frame that makes this prototype work is the “dimMask” frame. It sits directly above the wallpaper image and has a fill of 20% black. I’ve also set it to have a background blur of 0.
<img alt="" src="https://cdn-images-1.medium.com/max/442/1*tCz5xypi9ZXaqGmdEeYmsQ.png">As you can see, Background Blur is experimental. You can read about known issues <a href="https://help.framer.com/troubleshooting/background-blur-issues">here</a>. 🤓
This dimMask frame is within another frame called wallpaper. All of this layer/frame hierarchy made it possible for me to create the nifty parallax effect that happens while sliding the lock screen up.
<h4>Code</h4>
First, I needed to enable dragging on the lock screen frame and setup its draggable properties like turning off horizontal dragging and overdragging (overdrag is basically the bounce that happens when an object is dragged beyond its constraints):
<pre>lockScreen.draggable.enabled = true lockScreen.draggable.horizontal = false lockScreen.draggable.constraints = y: -lockScreen.height + img.height height: (lockScreen.height*2)-img.height lockScreen.draggable.overdrag = false</pre>
Next, I set up some ‘modulations’ for the lock screen, the illustration, and the dimMask so that as the lock screen is dragged upwards, the effects would trigger:
<pre>lockScreen.onDrag -&gt; dimMask.backgroundBlur = Utils.modulate(lockScreen.y, [0, -406], [0, 20], true) img.opacity = Utils.modulate(lockScreen.y, [0, -406], [1, 0.5], true) img.y = Utils.modulate(lockScreen.y, [0, -406], [0, 100])</pre>
So basically, as the lockscreen’s y-position decreases (which means that it is moving ‘north’), the backgroundBlur on the dimMask increases, the illustration’s opacity increases, and its y-position changes at a slower rate which creates the parallax effect.
Honestly, I could have stopped there. Had I done so, I would have shared this prototype a month sooner. 😜
I added a number of nice-to-haves that help create a stronger illusion for this prototype.
First, there is the nice little hint that animates at the bottom of the view. The bar indicator slides up as the words “Swipe up to open” appear. This was acheived using states for the objects and then animating to those states using the delay() utility.
<pre>swipeText.states.add up: maxY: btn_flashlight.maxY animationOptions: curve: Bezier(0.4, 0.24, 0.28, 1) #<a href="http://cubic-bezier.com">http://cubic-bezier.com</a> time: 1.5 down: y: 773 visible: opacity: 1 animationOptions: time: 1 invisible: opacity: 0 animationOptions: time: 1.5</pre>
<pre>bottomHomeBar.states.add up: maxY: btn_flashlight.maxY+24 animationOptions: curve: Bezier.easeInOut down: y: 799 animationOptions: time: 2.5 curve: Bezier.easeOut</pre>
<pre>Utils.delay 1.8, -&gt; swipeText.animate("up") swipeText.animate("visible")</pre>
<pre>Utils.delay 4.5, -&gt; swipeText.animate("invisible") Utils.delay 2, -&gt; bottomHomeBar.animate("up") Utils.delay 2.7, -&gt; bottomHomeBar.animate("down")</pre>
Second, although I could have just had a static view behind the lock screen, where’s the fun in that? So I animated all of the home screen icons into place when the lock screen’s y-position reaches a certain threshold.
<pre>lockscreen.onDrag -&gt; </pre>
<pre>...</pre>
<pre> if lockScreen.y &lt; -300 topLeft.animate("default") topRight.animate("default") Utils.delay 0.1, -&gt; middleLeft.animate("default") middleRight.animate("default") Utils.delay 0.2, -&gt; bottomLeft.animate("default") bottomRight.animate("default") Utils.delay 0.4, -&gt; labels.animate opacity: 1 dock.animate("default")</pre>
I also added some auto-complete functionality to just finish out the animations if the lock screen’s y-position was high enough when the user stopped dragging. Or, if it isn’t high enough, it animates back to it’s default position.
<pre>lockScreen.onDragEnd -&gt; if lockScreen.y &lt; -300 lockScreen.animate("open") img.animate("open") dimMask.animate("open") else lockScreen.animate("default") img.animate("default") dimMask.animate("default")</pre>
The last item I wanted to animate was the lock icon. Using FaceID, the lock icon swings into an unlocked position when your phone recognizes your face. I wanted to do that and it seemed simple enough but, well… I’ll just let these GIFs tell the story:
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*YysfvXl74C3cIfIetbU2Tg.gif">My first attempt didn’t exactly go as expected. 😦<img alt="" src="https://cdn-images-1.medium.com/max/375/1*cq6QV82zoz2THqSmSa2P7g.gif">I added a red background to debug and I still had no clue why half of the screen was disappearing. 🤔
And then, I had an idea. Maybe it has something to do with my layer hierarchy. So I pulled the lock out of its parent frame and put it at the first level above everything else.
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*hwvKpfnW1MqnbjcOiosJpg.gif">I can’t even… 😫
And after that, I pretty much gave up on the unlocking animation.
<h4>Lessons Learned</h4>
It was fun to play with the background blur to get the effect I was looking for. I also reacquainted myself with adding multiple states to an object, which came in handy.
<pre>object.states.add state_1: #properties for state_1 state_2: #properties for state_2 state_3: #properties for state_3</pre>
Lastly, messing with that lock animation taught me that some details just aren’t worth the time and effort to implement them in a prototype. But I still try. It usually isn’t until after I’ve tried that I can actually say whether or not it’s worth it.
<h4>See for Yourself</h4>
Feel free to download the 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.
Swipe to Unlock on the iPhone X <a href="https://framer.cloud/uNCjd">https://framer.cloud/uNCjd</a>
Thanks for following me and 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, you can reach out to me on Twitter @toddjreynolds.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=72eb1fcfaa1f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-prototype-swipe-to-open-transition-on-iphone-x-72eb1fcfaa1f">Using Framer to Prototype Swipe to Open Transition on iPhone X</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 Swipe to Open Transition on iPhone X

16 of 100

Top Stories