Beyond the Basics With Framer


In my previous tutorial about Framer, you learned how to use layers, states, and events to create simple mock-ups for your iOS and Android apps. Framer has a lot more to offer though. In this tutorial, I am going to focus on a few more advanced features of the framework that allow you to add more complex interactions and effects to your mock-ups.

1. Nesting Layers

Because a layer can be embedded inside another layer, you can create complex layer hierarchies with Framer. An embedded layer is called a sublayer and the layer that it is embedded in is called its superlayer. The following code snippet shows you how to embed a layer within another layer using the superLayer property.

You can make use of layer hierarchies to simulate multiple screens in your mock-ups. Let me show you how to do this with the help of an example. Consider a mock-up that has two screens, a login screen and a welcome screen.

The login screen contains input fields for the username and password, and a submit button. The welcome screen contains an image and a few lines of text.

To create such a mock-up, you could consider the login and welcome screens as superlayers and the user interface elements they contain as sublayers. Let’s start by creating the superlayers first.

As you can see, loginScreen and welcomeScreen are blank Layer objects for now. Let’s add some sublayers to the loginScreen layer.

In the same way, let’s now add some sublayers to the welcomeScreen layer.

At this point, if you try to view your prototype in a browser, it will look a bit messy. Both superlayers (loginScreen and welcomeScreen) are visible at the same time.

To hide a layer, you set its visible property to false. Here’s how you keep the welcomeScreen layer hidden when the mock-up starts:

To change the view from the login screen to the welcome screen, you can simply hide the loginScreen layer and turn on the visibility of the welcomeScreen layer. The following code snippet shows you how to do so inside the click handler of submitButton:

Go back to the browser and refresh the page to see your mock-up making more sense now. Remember that the browser you’re using to view the mock-up should be WebKit-based, such as Chrome or Safari.

Instant transition

If you don’t like the instant switch, you can animate the transition by using the animate function to animate, for example, the opacity of the layers.

This is what the transition looks like now:

Fade-out and fade-in transition

2. Using Layer Effects

Framer allows you to apply a variety of image effects, such as gaussian blur, hue rotation, brightness/contrast adjustment, color inversion, sepia tone addition, and more, to your Layer objects.

The following code snippet shows you how to use the blur effect to create a blurred background:

This is what the result looks like:

Blurred background

The rest of the effects are used in a similar manner. For example, to reduce the contrast of the bg layer, you need to modify the contrast property:

3. Creating Scrollable Layers

To make a layer scrollable, you need to embed it in the content layer of a ScrollComponent object. Creating a ScrollComponent is similar to creating a Layer object:

The following code block shows you how to embed a Layer object within the content of scroll1:

Here’s what a ScrollComponent looks like in action:


Note that scrolling is possible only if the dimensions of the layer are larger than the dimensions of the ScrollComponent it is embedded in.

4. Displaying Paginated Data

Sometimes, instead of continuous scrolling, you might want to present your data as a set of pages. For example, you might want to create an interface where a user swipes through a set of images. This can be done using a PageComponent. The PageComponent class is derived from the ScrollComponent class and has an identical constructor.

To add a Layer to a PageComponent, you need to use the addPage function. The following code shows you how to create a PageComponent and add a few image layers to it:

The result looks like this:

Paginated scrolling

5. Managing Animations

You already know that you can use the animate function to animate the properties of a Layer object. However, calling animate starts the animation immediately. If you want to have control over when an animation starts or stops, you can use Animation objects instead.

Here’s how you create an Animation object:

You can then use the intuitively named start, stop, and reverse functions to manage the animation. For example, to start the animation invoke the start function:

You can also add event handlers to Animation objects, using the on function. This feature can be used to create chained animations. For example, here’s a code snippet that reverses animation1 when the animation ends:

The animation would look like this:

Managed animation

6. Changing Device Orientation

All the examples I showed you till now rendered the mobile device in portrait orientation. If you want to use the landscape orientation, you need to assign the value 90 to the orientation property of the DeviceComponent.

In the browser, the device will now look like this:

Landscape orientation

To animate the change in orientation, you use the setOrientation method, passing in true as its second parameter.


In this tutorial, you learned how to make use of Framer’s more advanced features, such as nested or embedded layers, layer effects, scrolling containers, and animation events. With a little bit of creativity and effort, you can now create stunning prototypes using the Framer framework. Here are some beautiful mock-ups to inspire you.

Refer to Framer’s Documentation to learn more about this powerful prototyping framework.



Related Articles