Learn Framer with Kanye

A few basics to get you up and running in Framer.

Illustration by Christine J Moon

I have been using Framer as my main prototyping tool and it’s been amazing so far. The Framer team has definitely built something super awesome and useful for designers and product builders all around the world.

To get a deep understanding of Framer I recommend learning more about JavaScript and CoffeeScript because Framer uses CoffeeScript which is built on top of JavaScript. I included various resources at the end of this post.

For the purpose of this tutorial I wanted to provide a few examples to get people started prototyping animations right away on Framer.

Sometimes it can be hard to just read and learn about code but I think it’s best to just show people how easy it is to get up and running with Framer.

Things to keep in mind:

1. Indentations and capitalization matters
2. It’s okay if the syntax doesn’t make 100% sense, just take a look at the resources I included down in the bottom
3. You will need to download Framer Studio here to follow along

Lets get started! Here’s a link to the Kanye illustration you will need.

Animation #1: Creating a pulsing object

What you will create:

Steps to create this animation:

Step 1

Drag and drop kanye.png into Framer Studio

For the first example make sure the Viewer is set to fullscreen like the following, you can change the view setting by clicking on the top right ‘Viewer’ button:

Step 2

Rename the imported file to kanye:

kanye = new Layer
    width: 457, height: 457
    image: “images/kanye.png”

Step 3

Center the kanye illustration:

kanye.center()

Step 4

Create two animation objects:

Animation object 1:

Here I am making the kanye illustration enlarge by 30% with a duration of 1.5 seconds

bigger = new Animation
    layer: kanye
    properties:
        scale: 1.3
        time: 1.5

Animation object 2:

Here I am making the kanye illustration scale to half its original size with a duration of 1.5 seconds

smaller = new Animation
    layer: kanye
    properties:
        scale: 0.5
        time: 1.5

Step 5

Now we connect the two animation objects by having one start when one ends

bigger.on Events.AnimationEnd, ->
    smaller.start()
 
smaller.on Events.AnimationEnd, ->
    bigger.start()

Step 6

This final piece of code will start the animation:

bigger.start()

Here is the final code for the previous example:

kanye = new Layer
    width: 457, height: 457
    image: “images/kanye.png”
 
kanye.center()
bigger = new Animation
    layer: kanye
    properties:
        scale: 1.3
        time: 1.5
 
smaller = new Animation
    layer: kanye
    properties:
        scale: 0.5
        time: 1.5
 
bigger.on Events.AnimationEnd, ->
    smaller.start()
 
smaller.on Events.AnimationEnd, ->
    bigger.start()
 
bigger.start()

Click and move an object

What you will create:

Steps to create this animation:

Step 1

Drag and drop kanye.png into Framer Studio

For all the examples here on out, change the Viewer mode to an iPhone 6 device like the following:

Step 2

Rename the imported file to kanye:

kanye = new Layer
    width: 457, height: 457
    x: 25
    y: 25
    image: “images/kanye.png”

Step 3

In prototyping animations you will need to know how to react to user input.

The following code basically means when kanye is clicked on, kanye will be moved to x: 200 and y: 800.

Change and experiment with the numbers in the x and the y and see what happens.

kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800

Here is the final code for the previous example:

kanye = new Layer
    width: 457, height: 457
    x: 25
    y: 25
    image: “images/kanye.png”
 
kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800

On top of this code, add a rotation of 360 and you get the following:

kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800
            rotation: 360

Here is the final code for the previous example:

kanye = new Layer
    width: 457, height: 457
    x: 25
    y: 25
    image: “images/kanye.png”
 
kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800
            rotation: 360

Erase the rotation property and add an opacity of 0 and see what happens.

kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800
            opacity: 0

Here is the final code for the previous example:

kanye = new Layer
    width: 457, height: 457
    x: 25
    y: 25
    image: “images/kanye.png”
 
kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800
            opacity: 0

Erase the opacity property and add the following line of code:

kanye.draggable.enabled = true

Now you can drag kanye around on your screen:

Here is the final code for the previous example:

kanye = new Layer
    width: 457, height: 457
    x: 25
    y: 25
    image: “images/kanye.png”
 
kanye.on Events.Click, ->
    kanye.animate
        properties:
            x: 200
            y: 800
kanye.draggable.enabled = true

Resources

JavaScript Resources

Teamtreehouse’s JavaScript Course

Eloquent JavaScript

Codeacademy’s JavaScript Course

CoffeeScript Resources

Framer’s CoffeeScript Basics

CoffeeScript for Framer.js

I also recommend taking a look at the following resources to get an understanding of how Framer works:

Framer’s Learning Guide

Kenny Chen’s awesome Framer Tutorials

New to Framer? Just 3 Things to Get You Started

Thank you for reading this article! If you enjoyed this article please click on the recommend button. If you have any questions please contact me on Twitter @mikelikesbap