Framer, Prototype
iOS Lock Screen Interaction

iOS Lock Screen Interaction

A common interaction in mobile apps today is swiping through pages. Continuing with another Framer Teach and Learn example, we’ll be prototyping the iOS lock screen interaction of swiping right to reveal the pin code keypad.

In this Framer prototype tutorial, instead of importing designs from Sketch or Photoshop, we’ll be importing the images directly. You can try and recreate the image assets yourself or download the project and get the existing images in the project’s image folder. 

We’ll be expanding on the original example slightly to act more like the current iOS lock screen so my example will have a few more image assets.

To import images, just drag and drop them into Framer Studio. The image will be placed at the top left corner and the image layer will automatically be added for you with a generic variable name. From there, you can rename the layer and add or adjust any layer properties to layout your screen.

import-image

We’ll start by importing the background image and giving it a better variable name. Since it takes up the whole screen and starts at the top, left corner, we don’t have to explicitly define “x” and “y” to be 0.

We do the same thing for the status bar. When I exported the image, I made sure to include the transparency, start at the top, left and to give it a width of the screen. This way, we don’t have to deal with positioning as it also starts at the top, left corner.

Next, we’ll add the tab bars to access the Today screen and control panel. In the original example, the control panel tab bar is included as part of the home image but we’re going to want to animate this off the screen so I’ve created a separate image. For the “x” and “y” positions, I just referenced my Sketch file and used the same numbers in Framer.

If we wanted to be sure it was centered horizontally, we could have used the centerX function.

We’ll create a layer that is the size of our screen to act as the home screen so we can swipe anywhere on the screen. We set the backgroundColor property to null so the default blue background isn’t displayed and we’ll give it a name so we can reference it later.

Another way to not show the background color is to the backgroundColor property to “transparent”.

I combined the date and time labels and the camera icon into one image since there is no interaction or animation of any of these individual elements. I’ll set this layer’s superLayer to be the “home” layer we just created. 

When we create new layers, all the layers live at the same level. We can embed one layer inside another to create a parent-child relationship between the child layer, also known as a subLayer, and the parent layer, also know as the superLayer.

If we modify the parent layer in any way, such as moving it’s position, the change is also applied to any child layers. This is great for when you want to manipulate a group of elements.

The last image we need to import for this page is the slide to unlock arrow and text. Just like with the previous image, we’ll set this layer’s superLayer to be the “home” layer.

For the pin code screen, we’re just going to import it as one image that fits the screen. We’ll give it a name as well to reference later.

At this point, the pin code screen overlays the home screen.

pincode-overlay

We’ll want to put them next to each other so we can page through them. To create the paging interaction, we can create a page component that is the screen width and height. We’ll set it’s background color to null and set its scrollVertical property to false, since we only want to page right and left.

Now all we need to do is add our pages to this page component. When we add pages, they are added to the right of the last page. Since we want to swipe right to get to the pin code screen, we need to add the pin code screen first before the home screen. To add a page, we use the addPage function and specify the layer to add.

To start on the home screen, we use the snapToPage function and specify the layer name. We can also specify if we want to see the animation of the page switching. For the initial display, we don’t want to see the animation so we set the animate argument to false.

We now are able to swipe left and right to see the home and pin code screen.

ios-scroll-component

If you have an iOS device, you may notice a few things about the actual interaction that aren’t represented in our prototype: 

  1. The background fades out, scales a little and blurs when switching to the keypad
  2. The tab bars move off screen when switching to the keypad
  3. The slide to unlock text and arrow doesn’t immediately display

Let’s add each of these little big details to our prototype.

We want to update the opacity, blur, and scale property of the background layer based on the “x” position of the page component content. We can listen to the “x” position changing with the “change:x” event on the page component’s content.

To fade, blur and scale the background, we can use the utility function Utils.modulate. This function translates a number between two ranges and is super useful when a change in one property, like the position, affects another property, like a layer’s blur value.

Since the pin code page is technically our first page, it has an “x” position of 0. The home page has an “x” position of -750. To verify this, you can print out to the console the position.

When we’re on the home page, we don’t want any blur so we want the blur value to be 0. When we’re on the pin code page, we’ll make the blur value 20. The blur value will be somewhere in between 0–20 depending on the “x” position.

Since we are listening to the event on “pages.content”, we can refer to it as “this” instead as a shortcut.

In addition to specifying the ranges to translate the values, there is a limit argument that is by default set to false. We want to set this to true so it will never return a value outside of what we defined, in this case 0–20 for the blur. 

Had we not set this to true, if for example, the page component’s “x” position went above 0, the blur value would go above 20.

We’re going to use the same modulate functionality and give the background some opacity and a slightly larger scale when paging to the pin code screen.

Finally, we’ll use the modulate function to also move the today and control panel tab bar’s off the screen.

Our prototype is coming along nicely. All that’s left is to show the slide to show the slide to unlock text and arrow after a few seconds. To do that, we can go back and set the layer’s initial opacity to 0. 

We can use the utility function Utils.delay and animate the opacity of the “slideToUnlock” layer.

Now when we view our prototype, the hint displays after 4 seconds but we do have a small issue — after the hint displays, it remains there forever. In the actual iOS lock screen, when we return to the home screen, the hint is always not there initially.

To solve this, we can listen to an event for when we change the page by listening to the “change:currentPage” event. If we change to the pin code page, we can set the “slideToUnlock” layer’s opacity to 0. Otherwise, we know we are on the home page and can then animate the opacity back to 1 after a delay. We can check what page we’re on by looking at the “name” property we set in our page layers.

One final thing we should do is clean up the code a little. Since we are animating the layer’s opacity two times in our code (once initially, and then again whenever we change back to the page), it would be cleaner if we put it in a function and just called that. 

We’ll create a function called “showSlideToUnlock” and just put our logic there. To create a function, we give it a name, followed by an equal sign, any arguments in parenthesis (we have none), and then the arrow symbol.

We’ll then update the code to call the function instead.

Here’s what the complete iOS Lock Screen prototype looks like:

ios-lock-screen

You can play with the prototype and download the Framer project here:

iOS Lock Screen with Framer

Check out Framer’s example version as well.

Here’s what my full code looks like:

If you want to try and expand on this prototype you could try adding Today screen from swiping down on the top tab bar or the Control Panel from swiping up from the bottom tab bar. Or you can display the interaction when tapping on the numbers on the keypad.

Do you want to see more Framer prototype tutorials like this? Leave a comment below or share your thoughts with me on Twitter (@kennycheny). If you want to know when I post new content, join the mailing list and be the first to know.

Want more Framer content like this?

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Kenny Chen


Hi, I'm Kenny - a UX Designer from Los Angeles who believes that beautiful, subtle movement enhances the user experience and makes products more engaging, dynamic, and memorable. My goal with Prototyping with Framer is to help you design amazing interaction and animation prototypes.