CoffeeScript for Framer by Tessa Thornton Flashcards
Which character do we use for decimal numbers?
The point (not the comma)
How to insert a string
Strings come in quotation marks.
“This is a string”
‘This is also a string’
How to concatenate strings?
Using a + sign: “My name is “ + “Tessa” # => “My name is Tessa
Which type of data is this: “40”
This is a string (because inside quotation marks)
“50” + “50”
=> “5050”
How to assign a variable?
Variables are assigned using the = operator.
What is a variable?
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…
Variables • can’t contain spaces • can’t start with numbers • can’t contain punctuation or symbols other than _
What is the common naming convention for variable names?
CamelCase
How do we make a string interpolation? (a variable inside a string)
We can embed the variable right in the string if we surround it with #{} print “my favorite color is #{color}, what’s yours?”
What are boolean values?
Booleans are values that are either true or false. They’re indicated with just the words true or false without quotation marks. myBoolean = true
Which operator do we use to indicate that two values are the same?
is or ==
What do we use to negate a condition?
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
Which syntax for conditional statements?
if/else
CoffeeScript avoids using symbols like semi-colons and parentheses. But in return, we need to follow certains rules about…
… indentation
How do we insert comments in Coffee Script?
Using #
myObjectA =
name: “Framer”
age: 12
How to target the name property here? (2 ways)
2 options:
- myObjectA.name
- myObjectA[“name”]
How do we indicate that we’re putting a function in CoffeeScript?
Using the -> arrow
checkAge()
What do the brackets mean?
The () part basically means “go”. It tells the computer “run the function in the checkAge variable”
Functions can be even more useful if we can give them values to work with. These values are called…
Parameters when creating the function. Arguments when calling the function and assigning values to those parameters.
In CoffeeScript, we can give a function the ability to accept arguments. How do we do that?
By adding parenthesis containing the argument name before the -> sign
What are arrays?
Arrays are lists or collections of multiple items
Arrays have some built in methods (functions that they can use) for finding out information about them, like length.
fruits = [“apples”, “oranges”, “bananas”]
How to get the length of this array?
fruits.length()
You can access elements in an array by their index. The index is the element’s position within the array. But there’s a warning! Which one?
Arrays are zero-indexed.
How do we access an element in an array?
We use square brackets containing the index of the element we’re looking for.
Ex: fruits [1]
How do we add to arrays?
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”)
Why arrays can be very powerful in CoffeeScript?
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.
Which method would we use to uppercase the first string elements of our fruits array?
fruits [0]. toUpperCase ()
How would we uppercase all our string elements inside our fruits array?
for fruit in fruits fruit.toUpperCase()
What is an object?
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.
Can we store arrays and booleans in objects?
Yes
Can we store objects inside objects?
Yes
book =
Author:
name: “Kurt Vonnegut” born: 1922
died: 2007
What is this? And what is the difference between = and :
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.
What punctuation sign do we use to access properties in an object?
We use dots. Ex: book.title
book =
author:
name: “Kurt Vonnegut” born: 1922
died: 2007
How to print the date of birth?
print book.author.born # => 1922
book =
pages: 256
genres: [“Science Fiction”, “Satire”]
fiction: true
How to print “Satire” ?
print book.genres[1]
=> “Satire”
What is a method?
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.
book =
title: “Slaugherhouse Five”
read: -> print “All this happened, more or less.”
What is the read property and how to call it?
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.
What is new Layer() ?
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)
square = new Layer(
width: 200
height: 200
x: 100
y: 100 )
What’s inside the brackets?
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
How can we modify a layer’s appearance using CSS properties in Framer ? (simple way)
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.
Which method do we use to animate a layer ?
layer.animate()
What do we need to specify so that the animate method will do something ?
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
Time-related properties (delay and time), are specified in seconds. By default, animations in Framer take…
1 second
layer.animate
properties:
opacity: 0
Time: .2
What do you see here ? (elements hierarchy)
“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.
How do we add repeat and delay properties to our layer animation ?
layer.animate
properties:
opacity: 0
repeat: 4
delay: 2
Which method do we use to “listen” for events triggered by the user ?
We use the « on » method
Does the « on method » takes arguments ? If yes, which ones ?
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 , →)
When you use a function as an argument (like in the « on method »), it’s called a…
…callback
In plain english, calling the “on method” with a callback is like saying…
…“listen for and do”
The two arguments are:
- the thing that you’re listening for
- the thing that you should then do
What is the syntax in CoffeeScript to indicate a function ? Let’s say we want to declare functioName as a function
FunctionName = →
When we give the “on method” a function as an argument, it doesn’t need…
…a name or an equals sign. We just need the -> part
button.on(Events.Click , →) Why the comma ?
The comma is the separation between the first argument (the name of the event), and the second (the function).
How do we access the properties of the screen we’re working on, in Framer?
Framer.Device.screen
Ex:
Framer.Device.screen.width Framer.Device.screen.height
When we specify the value of curve property, what is the data type expected in Framer ?
A string. Therefore it is specified in quotation marks. Ex : “ease-in”
How to trigger something after one animation is finished ?
Layer.on Events.AnimationEnd, →
As for Animation Curves, Spring is an alias for…
spring-rk4
How many arguments does the spring function take ?
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))
Which symbol means “not” in CoffeeScript ?
!
How do we set a value to its opposite ?
We do = !
Ex :
is_open = ! is_open
Which method do we use to add states to a layer ?
layer.states.add()
Each state consists of…
- a name (string)
- and property pair(s)
States are configuration objects.
Which method enables to switch to the next state(s) ?
layer.states.next()
Animation between states has default settings (like 1 second for the time). How do we change this ?
We need to add and configure layer.states.animationOptions
Ex : layer.states.animationOptions = time: 0.2
How to we make a layer draggable ?
layer.draggable.enabled = true
How to make a layer draggable only horizontally (only on x axis) ?
layer.draggable.vertical = false (Same goes for layer.draggable.horizontal)
Give 3 events based on Drag
- DragStart
- DragMove
- DragEnd
Which property relates to the horizontal center of a layer ?
It’s : midX
Ex :
layer.midX
Which property relates to the vertical center of a layer ?
It’s : midY
Ex:
layer.midY
What do we write if we want to repeat something 5 times ?
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)
For i in [0…5]
It’s a bit of a convention to use i for the variable that gets re-assigned for each time through the loop. But what does the i stand for ?
iterator or index
How do we assign an image (from “images” folder) to a layer ?
image : “images/myImage.png”
How to center a layer horizontally in its superLayer ?
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.
How to center a layer vertically in its superLayer ?
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.
How to center a layer?
layer.center()
Center this layer in its superLayer. If there is no superLayer it will be centered relative to the screen.
The blur property is set in pixels, so you can…
…copy it right out of the Gaussian blur in Photoshop or Sketch.
When we scale elements, we should keep in mind that the scaling won’t affect…
…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
The last created layer will always be on…
…top. Which means above the other layers. This can be confirmed by looking at the layer inspector.
Let’s say you have a layer that isn’t positionned where you want in the layer inspector, which causes a bad overlapping. How can you deal with this ?
By managing either its:
- superLayer (layer.superLayer <layer>)</layer>
- subLayers (layer.subLayers <array>)</array>
- index (layer.index)
(The layer index increases by order of insertion)
