Learn Framer with Kanye
A few basics to get you up and running in Framer.
--
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:
- Indentations and capitalization matters
- It’s okay if the syntax doesn’t make 100% sense, just take a look at the resources I included down in the bottom
- 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: 800kanye.draggable.enabled = true
Resources
JavaScript Resources
Teamtreehouse’s JavaScript Course
Codeacademy’s JavaScript Course
CoffeeScript Resources
I also recommend taking a look at the following resources to get an understanding of how Framer works:
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