Framer Tutorial: Animating Layers

This post will be a simple tutorial that will go over some basic concepts on how to animate layers on a screen using Framer.

Framer is my main tool I use to prototype interactions and animations for my design work. Framer has a bit of a learning curve and I’ve seen people drop off from the complexities this tool comes with, but I will be writing a series of posts to help build the foundation to help people continue building with Framer.

Here is another fun post I did a while ago that goes over other concepts titled, Learn Framer with Kanye.

What you will be creating:

Here’s a link to the prototype.

What you will need:

1. Framer Studio
2. Sketch App
3. Sketch File you will be using (I included the Dropbox link)

Keep in mind that indentations and capitalization matters. If you’re stuck anywhere, check out the final prototype here. Download the file and open it up in Framer to see my code.

Step 1

Open up the Sketch file on your computer. This Sketch file is simple but it’s important to understand how to manage your layers in Sketch to work with Framer once you start working with a Sketch file that has many layers.

Check out these resources that give a better understanding on how Sketch layers work with Framer:

1. Framer’s Import Designs Overview
2. David Lee’s article on Getting Started with Framer
3. Naema Baskanderi’s article on Sketch Tips for Framer.js

Go to Framer and import the Sketch file at ‘1x’.

Here is what you should see:

The Sketch file that was imported is now being held in the variable titled ‘sketch’. You can rename this to any variable name you like but for this tutorial I will be using the ‘sketch’ variable.

The following line of code is what you should be seeing in Framer.

sketch = Framer.Importer.load(“imported/location framer@1x”)

Step 2

Next we will be hiding all the layers in order to animate them back onto the screen with motion.

We will be using the ‘sketch’ variable to alter the layers that were imported to Framer.

We will first hold the y position of the location icon in a variable titled ‘iconY’ in order to bring this layer and animate it back to its original position.

The following line of code will do this where ‘iconY’ holds the y location of this layer:

iconY = sketch.icon.y

In this animation we want to bring up the location icon from a position that is lower than the original position so making the scale or opacity to zero won’t work. In order to place the icon underneath its original position, we will need one line of code.

The following line of code will bring the location icon lower than the previous position so when animated, the icon will come from underneath back to its original position.

sketch.icon.y = 415

Next lets remove the rest of the layers from the screen so we can animate them back in later by changing the scale and the opacity.

Here is the code you will be adding next:

sketch.icon.scale = 0
sketch.Earth.scale = 0
sketch.button.opacity = 0
sketch.button.scale = 0
sketch.location.opacity = 0
sketch.text.opacity = 0

Here is what you should see:

Step 3

Next we will use a few lines of code to animate the layers back into place.

We will start with the location icon.

Type in the following code:

sketch.icon.animate
    properties:
        y: iconY
        scale: 1
    delay: .6
    curve: "spring(100, 15, 10)"

The code above means we are bringing the icon back to its original y position and back to its original size. Remember how we stored the y position of this icon in the variable ‘iconY’.

There is also a delay of .6 and I used a spring curve for a nice effect.

Check out this resource here for an overview on curves and timing.

Next lets bring in the Earth illustration with the following code:

sketch.Earth.animate
    properties:
        scale: 1
    delay: .1

This is what you should be seeing now:

Next lets bring in the text with the following code:

sketch.location.animate
    properties:
        opacity: 1
    delay: .2
 
sketch.text.animate
    properties:
        opacity: 1
    delay: .4

Notice that the text is appearing at different times from the delay I used.

This is what you should be seeing with the text animating in:

Finally we will bring in the button with the following code:

sketch.button.animate
    properties:
        scale: 1
        opacity: 1
    time: 1

Here is the final animation and what you should now be seeing:

If you want a better understanding of animation in software, I recommend checking out this great resource that Kenny Chen compiled. You will also find on that same site more awesome tutorials on Framer.

Thanks for reading!