Coffee Script for Framer by Tessa Thornton

The point (not the comma)

Strings come in quotation marks.

“This is a string”

‘This is also a string’

Using a + sign: “My name is “ + “Tessa” # => “My name is Tessa

This is a string (because inside quotation marks)

=> “5050”

Variables are assigned using the = operator.

Variables let you assign a value to an arbitrary symbol for later reference. A variable is a box you can put values into. Any kind of value, like a string or a number.

Variables • can’t contain spaces • can’t start with numbers • can’t contain punctuation or symbols other than _

CamelCase

We can embed the variable right in the string if we surround it with #{} print “my favorite color is #{color}, what’s yours?”

Booleans are values that are either true or false. They’re indicated with just the words true or false without quotation marks. myBoolean = true

is or ==

To negate a condition you use the keyword “is not”. In place of “is not” you can use the shortform “isnt”.

num = 5

num isnt 10

=> true

if/else

… indentation

Using #

2 options:

• myObjectA.name

• myObjectA[“name”]

Using the -> arrow

The () part basically means “go”. It tells the computer “run the function in the checkAge variable”

Parameters when creating the function. Arguments when calling the function and assigning values to those parameters.

By adding parenthesis containing the argument name before the -> sign

Arrays are lists or collections of multiple items

fruits.length()

Arrays are zero-indexed.

We use square brackets containing the index of the element we’re looking for.

Ex: fruits [1]

You can add new items to an array with the method push. push adds the item you specify to the end of the array. Ex: fruits.push("kiwis")

Because they let you repeat certain functionality over and over with different items by using loops. Loops let you do something for every item in an array.

fruits [0]. toUpperCase ()

for fruit in fruits fruit.toUpperCase()

An object is a collection of properties. In programming, a property is an association between a name and a value. If something has properties, you can store them in an object.

Yes

Yes

This is an object inside another object. Note that we use = and : in the above example. Note the difference: "=" assigns a variable name (book) to an object, and ":" matches up names and values. "author" is the name, and the object containing name, born, and died is the value.

We use dots. Ex: book.title

print book.author.born # => 1922

print book.genres[1]

=> "Satire"

Since we can store any kind of data in an object’s properties, we can also store functions as properties. When a function is the property of an object, it is called a method.

The read property is a method (a function that is the property of an object) that belongs to our book object. We can call it like we would call any function: book.read()

=> "All this happened, more or less." This is how the toUpperCase method works. It’s a method that belongs to all string objects.

This is a special kind of function that creates an object. square = new Layer () By default, in Framer it will create a 100*100 square with semi transparent blue color: rgba(0, 124, 255, .5)

An argument (of the new Layer function). And this argument is a configuration object. And the properties inside this configuration object are the attributes like width, height, x, y, etc.). To make that code a bit easier to read, we can get rid of the parentheses

You can modify a layer’s coordinates (x, y), as well as appearance by using camel-cased (camelCased) versions of most CSS properties, as well as some built-in framer properties. For example, color is just color but border-radius becomes borderRadius. If you want to rotate an element, you can modify the rotation property framer provides.

layer.animate()

By itself, .animate() isn’t goint to do anything. We need to pass it a configuration object to tell it what to animate, and how to animate it.

A configuration object will follow this format:

configObject =

properties:

property: value
property: value
time: 1
curve: "ease"
delay: 2

1 second

"properties" is an object (it’s an object nested inside an object).

"Opacity" is a property, so it’s indented one level further than "properties" to indicate the relationship. Time is a property of the animation, not a property of the object animating. Hence the outdent. Whitespace is significant here.

layer.animate

properties:

opacity: 0
repeat: 4
delay: 2

We use the « on » method

This is actually a method being called with two arguments, though it may not look like it. The format for the on method is on(eventName, function), where the function is the code that gets run when the event is triggered. It might make more sense if we leave on the parentheses:

button.on(Events.Click , →)

…callback

…“listen for and do”

The two arguments are:

• the thing that you’re listening for

• the thing that you should then do

FunctionName = →

…a name or an equals sign. We just need the -> part

The comma is the separation between the first argument (the name of the event), and the second (the function).

Framer.Device.screen

Ex:

Framer.Device.screen.width Framer.Device.screen.height

A string. Therefore it is specified in quotation marks. Ex : "ease-in"

Layer.on Events.AnimationEnd, →

spring-rk4

The spring function takes 4 arguments (the last one is optional):

• 1 tension (Strength of the spring)

• 2 friction (Weight of the spring)

• 3 velocity (Velocity at the start)

• 4 tolerance (Minimal threshold before the animation ends. (Optional))

!

We do = !

Ex :

is_open = ! is_open

layer.states.add()

• a name (string)

• and property pair(s)

States are configuration objects.

layer.states.next()

We need to add and configure layer.states.animationOptions

Ex : layer.states.animationOptions = time: 0.2

layer.draggable.enabled = true

layer.draggable.vertical = false (Same goes for layer.draggable.horizontal)

• DragStart

• DragMove

• DragEnd

It's : midX

Ex :

layer.midX

It's : midY

Ex:

layer.midY

for i in [0…5]

This is the start of a loop. Note that the 3 dots stand for an exclusive range (otherwise we would end up with a length of 6)

iterator or index

image : “images/myImage.png”

layer.centerX(offset)

Center this layer horizontally in its superLayer. If there is no superLayer it will be centered relative to the screen. The offset (argument of this method) is a pixel offset from the center and optional.

layer.centerY(offset)

Center this layer vertically in its superLayer. If there is no superLayer it will be centered relative to the screen. The offset (argument of this method) is a pixel offset from the center and optional.

layer.center()

Center this layer in its superLayer. If there is no superLayer it will be centered relative to the screen.

…copy it right out of the Gaussian blur in Photoshop or Sketch.

…the bounding box of the element that is being scaled. This is something to consider when positionning the scaled element with its x and y properties ! For instance, if you scale down and bring to zero the x and y properties of an object that is initially 200px wide and tall, you won't have it touching the top-left corner because it's scaled inside its bounding box. In case of doubt, printing the frame of the layer will give the necessary information

…top. Which means above the other layers. This can be confirmed by looking at the layer inspector.

By managing either its:

• superLayer (layer.superLayer )

• subLayers (layer.subLayers )

• index (layer.index)

(The layer index increases by order of insertion)