Framer Js

Framer
JS
Table of Contents
Introduction 0
Animation 1
BackgroundLayer 2
Canvas 3
Color 4
Compatibility 5
Default 6
Device 7
Draggable 8
Events 9
Layers 10
Modules 11
PageComponent 12
Pinchable 13
Print 14
Screen 15
ScrollComponent 16
SliderComponent 17
States 18
Utilities 19
VideoLayer 20
2
Framer JS
Framer JS
Framer JS, Prototype anything you can

imagine.
Introduction 3
Framer JS
Animation
Animation 객체는 레이어와 속성값 집합을 대상으로 애니메이션을 관리한다.
애니메이션은 커브에서 시작과 끝을 가진다. 시작값은 애니메이션이 시작 순간에 결정되고 끝값은

속성에 정의한다. 옵션으로 전달되는 속성값들만 지정한 애니메이션에 의해 값이 변하게 된다. 현
재 값과 끝값이 같다면, 애니메이션은 동작하지 않는다.
You can have multiple animations target the same layer as long as they don't target the
same properties. If you start two animations both targeting x for the same layer, the second
one will fail. 동일 속성을 타겟으로 하지 않는다면 동일한 레이어는 여러개의 애니메이션을 가질
수 있다. 동일 레이어에 대해서 x를 타겟으로 하는 2개 애니메이션이 있다면, 2번째 애니메이션은
동작하지 않는다.
Only numeric layer properties can be animated. The full list is x, y, z, width, height, opacity,
rotation, rotationX, rotationY, rotationZ, scale scaleX, scaleY, scaleZ, originX, originY,
perspective, scrollX, scrollY, borderRadius, borderWidth, shadowX, shadowY, shadowBlur,
shadowSpread, blur, brightness, saturate, hueRotate, contrast, invert, grayscale, sepia. You
can also animate the dynamic properties minX, midX, maxX, minY, midY and maxY.
Most properties can benefit from gpu accelerated drawing and you can animate many of
them without hurting your frame rate. But some properties need to involve the CPU to
animate and are therefore more expensive to render. The full list is width, height, scrollX,
scrollY,borderRadius, borderWidth.
To listen to animation events like start, stop and end please see the animation events.
Animation events will be passed onto the animated layer as well with the animation as the
first argument.
Animation 4
Framer JS
Options Value Description
layer Layer
The targeted layer
(required) Object
properties
Object The target values for the animated properties
(required)
Used curve for the animation. For a full list see curve types.
curve String You can also combine the curve with its options as a
shorthand: "spring(100,10,0)". The default curve is linear.
curveOptions Object Options for the used curve. For a full list see curve options.
The duration in seconds. Ignored for spring values. Default

time Number
value is 1 second.
delay
Number The delay before the animation starts in seconds.
(optional)
repeat
Number The number of times this animation needs to repeat.
(optional)
Animation Curve Types

Curve types Description
linear Constant speed
bezier-curve Bezier Curve
spring-rk4 Runge-Kutta spring. Precise spring physics.
spring-dho Damping harmonic oscillator spring. Sloppy spring physics.

spring alias for "spring-rk4"
Animation Curve Options
Animation 5
Framer JS
Curve Types Type Description
bezier-curve
preset string "ease-in", "ease-out", "ease-in-out"
curve bezier
array [0, 1, 0, 1]
values
spring-rk4
tension number Strength of the spring
friction number How hard it is to move the object
velocity number Velocity at start
Minimal movement threshold before we say the spring

tolerance number
finished
spring-dho
stiffness number Strength of the spring
damping number How quickly the spring should reduce motion/force
mass number Weight of the object
Minimal movement threshold before we say the spring
tolerance number
finished
Some examples. Notice that none of these animations actually start running until you call
animation.start()
layerA = new Layer
# Animate the layer to the right

animationA = new Animation
layer: layerA
properties:
x: 100
# Animate multiple properties

animationB = new Animation
layer: layerA
properties:
x: 100
opacity: 0.5
# Animate the layer to the right in 5 seconds

animationC = new Animation
layer: layerA
properties:
x: 100
time: 5
Animation 6
Framer JS
# Repeat an animation 5 times

animationD = new Animation
layer: layerA
properties:
x: 100
repeat: 5
# Start an animation after 5 seconds

animationE = new Animation
layer: layerA
properties:
x: 100
delay: 5
# Animate the layer with a spring curve

animationF = new Animation
layer: layerA
properties:
x: 100
curve: "spring(100, 10, 0)"
# Animate the layer with a bezier curve

animationG = new Animation
layer: layerA
properties:
x: 100
curve: "ease-in-out"
animation.start()
Start the animation.
layerA = new Layer

layer: layerA
properties:
x: 100
# Nothing will move until we start

animationA.start()
Animation 7
Framer JS
animation.stop()
Stop the animation.
layerA = new Layer

layer: layerA
properties:
x: 100
animationA.start()
# Stop the animation

animationA.stop()
animation.reverse()
Returns: Animation Object

Create a new animation with all reverse values.
layerA = new Layer

layer: layerA
properties:
x: 100
animationB = animationA.reverse()
# Alternate between the two animations

animationA.on(Events.AnimationEnd, animationB.start)
animationB.on(Events.AnimationEnd, animationA.start)
animationA.start()
Animation 8
Framer JS
BackgroundLayer
백그라운드 layer는 일반 layer와 차이가 없다. 한가지 다른 특징은 윈도우를 따라 확대/축소된다는
점이다. 따라서 항상 전체 canvas를 덮고 있다. 만약 백그라운드 layer가 superlayer를 가진다면,
백그라운드는 superlayer의 크기를 상속받게 된다.
layerA = new BackgroundLayer

backgroundColor: "white"
Colors can be defined by keywords, but also rgb and hex values.
# Hex value for white

backgroundColor: "#ffffff"
# RGB value for white

backgroundColor: "rgb(255,255,255)"
# RGBA value for white

backgroundColor: "rgba(255,255,255,1)"
BackgroundLayer 9
Framer JS
Canvas
Canvas 객체는 현재 화면 전체에 대한 픽셀 정보를 포함하고 있다. 여러분이 화면의 크기를 변경
하면 이 Canvas 객체도 값이 변하게 된다.
Canvas.width <number>
현재 화면 폭을 나타내는 속성값으로 읽기만 가능하다.
print Canvas.width
# 출력: 640
Canvas.height <number>
현재 화면의 높이를 나타내는 속성값으로 읽기만 가능하다.
print Canvas.height
# 출력: 480
Canvas.size <object>
현재 화면의 폭과 높이를 나타내는 속성값으로 읽기만 가능하다.
print Canvas.size
# 출력: { width:640, height: 480 }
Canvas 10
Framer JS
Color
The Color object can be used to define, detect, modify and mix colors. Colors can be defined
using either a string value or an object. All colors are converted to a Color object with r, g,
b , h, s, l and an a value.
bg = new BackgroundLayer
backgroundColor: "#28affa"
print bg.backgroundColor
# <Color "#28affa">
Supported color models: CSS Names, HEX, RGB, RGBA, HSL and HSLA.
# Multiple ways to define the same color:

blue = new Color("blue")
blue = new Color("#28AFFA")
blue = new Color("rgb(255, 0, 102)")
blue = new Color("rgba(255, 0, 102, 1)")
blue = new Color("hsl(201, 95, 57)")
blue = new Color("hsla(201, 95, 57, 1)")
You can also create new Color objects and pass in strings, or objects:
# Define a color with a HEX string

backgroundColor: new Color("#fff")
# Define a color with an RGB object

layerA = new Layer
backgroundColor: new Color(r: 255, g: 255, b: 255)
# Define a color with an HSL object

layerB = new Layer
backgroundColor: new Color(h: 360, s: 1, l: 1, a: 1)
Color Models
You can animate the background color, text color and shadow color of a layer. By default,
color transitions use HUSL. With the colorModel property, you can specify in which model
to animate. We support rgb , hsl and husl .
Color 11
Framer JS
backgroundColor: "blue"
# Animate in RGB
bg.animate
properties:
backgroundColor: "red"
colorModel: "rgb"
color.lighten( amount )
Add white and return a lightened color.
Arguments
amount — A number, from 0 to 100. Set to 10 by default.
# Create a new color, lighten it

blue = new Color("#28affa").lighten(20)
layerA = new Layer

backgroundColor: blue
color.darken( amount )
Add black and return a darkened color.
Arguments
# Create a new color, darken it

blue = new Color("#28affa").darken(20)
layerA = new Layer

color.saturate( amount )
Increase the saturation of a color.
Color 12
Framer JS
Arguments
# Create a new Color, saturate it

blue = new Color("#877DD7").saturate(100)
layerA = new Layer

color.desaturate(amount)
Decrease the saturation of a color.
Arguments
# Create a new Color, desaturate it

blue = new Color("#28affa").desaturate(25)
layerA = new Layer

color.grayscale()
Return a fully desaturated color.
# Create a new Color

yellow = new Color("yellow")
# Convert it to gray
gray = yellow.grayscale()
layerA = new Layer

backgroundColor: gray
Color.mix( colorA, colorB, fraction, limit,

model )
Color 13
Framer JS
Blend two colors together, optionally based on user input. The fraction defines the
distribution between the two colors, and is set to 0.5 by default.
Arguments
colorA — A color, the first one colorB — A color, the second one fraction — A number,
from 0 to 1. (Optional) limit — A boolean, set to false by default. (Optional) model — A

string, the color model used to mix. (Optional)
# Mix red with yellow

orange = Color.mix("red", "yellow", 0.5)
The limit defines if the color can transition beyond its range. This is applicable when
transitioning between colors, using Utils.modulate. Below, the limit is set to true , so the
transition cannot extend beyond the second color.
# Create new Layer

layerA = new Layer
# Enable dragging
layerA.draggable.enabled = true
# On move, transition its color to yellow

layerA.on Events.Move, (offset) ->
# Map the dragging distance to a number between 0 and 1

fraction = Utils.modulate(offset.x, [0, Screen.width], [0,1], true)
# Mix the colors, enable the limit, transition in HUSL

layerA.backgroundColor =
Color.mix("red", "yellow", fraction, true, "husl")
Color.random()
Returns a Color instance with a random color value set.
random = Color.random()
Color.isColor( value )
Checks if the value is a valid color object or color string. Returns true or false.
Color 14
Framer JS
Arguments
value — An object or string, representing a color
print Color.isColor(new Color "red") # true

print Color.isColor("red") # true
Color.isColorObject( value )
Checks if the value is a valid color object. Returns true or false.
Arguments
value — An object, representing a color
print Color.isColor(new Color "red") # true

print Color.isColor("red") # false
Color.isColorString( value )
Checks if the value is a color string. Returns true or false.
Arguments
value — A string, representing a color
print Color.isColorString("red") # true

print Color.isColorString("#28affa") # true
Color.toHexString()
Returns the hexadecimal string representation of a color.
Arguments
Color 15
Framer JS

print blue.toHexString() # "#0000ff"
Color.toRgbString()
Returns the RGB string representation of a color.
Arguments

print blue.toRgbString() # "rgb(0, 0, 255)"
Color.toHslString()
Returns the HSL string representation of a color.
Arguments

print blue.toHslString() # "hsl(240, 100%, 50%)"
Color 16
Framer JS
호환성
Framer.js
브라우저 Webkit (Chrome, Safari)
플랫폼 Mac OS X, Windows, Linux

모바일 플랫폼 iOS, Android, Windows Phone
Generator.app
Imports from Photoshop (13.0.0+), Sketch (3.0.3+)

플랫폼 Mac OS X, Windows (coming soon)
Framer Studio.app
Imports from Photoshop (13.0.0+), Sketch (3.0.3+)
플랫폼 Mac OS X 10.8+
Compatibility 17
Framer JS
Default
Framer.Defaults는 Layer나 Animation이 생성될 때, 기본 속성 값을 가지도록 할 수 있다. 예를 들
면, 새로 생성하는 모든 Layer가 밝은 블루 배경색상을 갖게 하기 위해서 아래와 같이 하면 된다.
# Override the default background color for layers

# 레이어의 기본 바탕색을 덮어쓴다.
Framer.Defaults.Layer.backgroundColor = "red"
# Override the default corner radius for layers

# 레이어의 모서리 굴림 기본값을 덮어쓴다.
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer
print layerA.backgroundColor
# 출력: "red"
print layerA.borderRadius
# 출력: 10
Here is an example to set the default animation curve. Note that those will also be used for
layer.states switches unless you override them for that layer with
layer.states.animationOptions.
기본 animation 커브를 설정하는 예제가 있다. Framer.Defaults 값들은
layer.states.animationOptions으로 레이어를 덮어 쓰지 않는 이상, layer.states를 스위치 하는데
사용된다는 점을 알아두자.
Default 18
Framer JS
# Override the default animation options for all Animations

# 모든 애니메이션 값에 대하여 기본 애니메이션 옵션으로 덮어쓴다.
Framer.Defaults.Animation =
curve: "spring(100,10,0)"
# Override the default corner radius for layers

# 레이어의 모서리 굴림 기본값을 덮어쓴다.
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer
layerA.animate
properties:
x: 100
# X축으로 100만큼 이동함
# The animation will now use the "spring(100,10,0)" curve

# 애니메이션은 "spring(100,10,0)" curve로 사용된다.
Default 19
Framer JS
Device
DeviceComponent은 iPhone, iPad 혹은 Android 장치를 에뮬레이션한다. 이것을 통해 콘텐츠 영
역의 크기를 조절하고 가로/세로 전환 등을 할 수 있다. 장치가 설정된 후에는 모든 것이 화면내에
서 렌더링이 일어난다. 장치 미리보기는 미러링된 미리보기와 일치하는데 이 말은 iPhone으로 미
리보기를 설정한 경우 iPhone의 전체 화면으로 보는 것과 같은 화면을 볼 수 있다는 뜻이다.
크기 조절과 가로/세로 전환은 Framer.Device로 미리 설정할 수 있다 :
Framer.Device.contentScale = 0.5
Framer.Device.orientation = 90
밑단을 보면 장치는 수많은 layer의 집합으로 구성되어 있다. 이렇기 때문에 커스터마이징이 쉽고
동작을 추가하기도 쉽워진다. 여러분은 Github에서 전체 소스를 확인할 수 있다. 일반적인 예제는
아래와 같다 :
# blur 처리된 백그라운드 이미지 설정하기

Framer.Device.background.image = "photo.jpg"
Framer.Device.background.blur = 10
# 현재 디바이스의 스크린 크기 가져오기

print Framer.Device.screen.width # Output: 640
print Framer.Device.screen.height # Output: 480
scale-to-fit 뷰는 화면 비율을 유지하기 위해 오프 픽셀 콘텐츠를 렌더링 할 수 있다. 50%, 100%

등으로 볼 때 콘텐츠는 항상 snap-to-pixel이다. 만약 브라우저가 이 기능을 지원한다면, 이미지 사
이즈를 축소하기 위해 JPEG2000으로 압축된다.
Device.deviceType <string>
렌더링할 장치의 타입을 나타내는 속성값으로 아래와 같은 가능한 옵션이 제공된다.
Fullscreen
전체 화면으로 렌더링 하기
Framer.Device.deviceType = "fullscreen"
iPhone 6
Device 20
Framer JS
선택 가능한 iPhone 6 색상
Framer.Device.deviceType = "iphone-6-spacegray"
Framer.Device.deviceType = "iphone-6-spacegray-hand"
Framer.Device.deviceType = "iphone-6-silver"
Framer.Device.deviceType = "iphone-6-silver-hand"
Framer.Device.deviceType = "iphone-6-gold"
Framer.Device.deviceType = "iphone-6-gold-hand"
iPhone 5s
선택 가능한 iPhone 5s 색상
Framer.Device.deviceType = "iphone-5s-spacegray"
Framer.Device.deviceType = "iphone-5s-spacegray-hand"
Framer.Device.deviceType = "iphone-5s-silver"
Framer.Device.deviceType = "iphone-5s-silver-hand"
Framer.Device.deviceType = "iphone-5s-gold"
Framer.Device.deviceType = "iphone-5s-gold-hand"
iPhone 5c
선택 가능한 iPhone 5c 색상
Framer.Device.deviceType = "iphone-5c-green"
Framer.Device.deviceType = "iphone-5c-green-hand"
Framer.Device.deviceType = "iphone-5c-blue"
Framer.Device.deviceType = "iphone-5c-blue-hand"
Framer.Device.deviceType = "iphone-5c-red"
Framer.Device.deviceType = "iphone-5c-red-hand"
Framer.Device.deviceType = "iphone-5c-white"
Framer.Device.deviceType = "iphone-5c-white-hand"
Framer.Device.deviceType = "iphone-5c-yellow"
Framer.Device.deviceType = "iphone-5c-yellow-hand"
iPad Mini
선택 가능한 iPad Mini 색상
Framer.Device.deviceType = "ipad-mini-spacegrey"
Framer.Device.deviceType = "ipad-mini-spacegrey-hand"
Framer.Device.deviceType = "ipad-mini-silver"
Framer.Device.deviceType = "ipad-mini-silver-hand"
Device 21
Framer JS
Nexus
Nexus 5와 Nexus 9은 검정 색상.
Framer.Device.deviceType = "nexus-5-black"
Framer.Device.deviceType = "nexus-5-black-hand"
Framer.Device.deviceType = "nexus-9"
Device.fullScreen <boolean>
deviceType과 무관하게 장치의 전체 화면을 그리는 것을 설정한다. true 혹은 false로 설정한다.
# Render the device in fullscreen

Framer.Device.fullScreen = true
Device.deviceScale <number / string>

장치의 scale이다. scale 값의 범위는 0.5부터 1 사이의 값이다.
Framer.Device.deviceScale = 0.5
Device.setDeviceScale(scale <number> ,
animate <boolean> )
Device.setDeviceScale( scale, animate ) 장치의 scale과 추가적인 애니메이션을 설정한다(true
혹은 false). scale 값의 범위는 0.5부터 1 사이의 값이다.
# 장치의 scale과 애니메이션 설정

Framer.Device.setDeviceScale(0.5, true)
Device.contentScale <number>
custom device를 포함한 컨텐츠의 scale이다. scale 값의 범위는 0.5부터 1 사이의 값이다.
# 컨텐츠 scale 설정
Framer.Device.contentScale = 0.5
Device 22
Framer JS
Device.setContentScale(scale <number> ,
animate <boolean> )
컨텐츠의 scale과 추가적인 애니메이션을 설정한다(true 혹은 false). scale 값의 범위는 0.5부터 1
사이의 값이다.
# 컨텐츠 scale과 애니메이션 설정

Framer.Device.setContentScale(0.5, true)
Device.orientation <number>
장치의 방향. 방향 값으로는 0과 90을 줄 수 있다(가로와 세로 방향).
Framer.Device.orientation = 90
Device.setOrientation(scale <number> , animate

<boolean> )
장치의 방향과 추가적인 애니메이션을 설정한다(true 혹은 false). 방향 값으로는 0과 90을 줄 수

있다(가로와 세로 방향).
# 장치의 방향과 애니메이션 설정

Framer.Device.setOrientation(90, true)
Device.orientationName <string>
이름을 직접 명시하여 장치의 방향을 설정한다. 사용할 수 있는 옵션은 "portrait"와 "landscape"이
다. portrait와 landscape은 각각 장치의 방향에 대해 0과 90을 주는 것과 같은 효과이다.
# "portrait"와 "landscape" 중에 방향 설정하기

Framer.Device.orientationName = "landscape"
Framer.Device.orientationName = "portrait"
Device.rotateLeft()
장치의 화면을 왼쪽으로 회전시킨다(장치는 시계 방향으로 돈다).
Device 23
Framer JS
Framer.Device.rotateLeft()
Device.rotateRight()
장치의 화면을 오른쪽으로 회전시킨다(장치는 반 시계 방향으로 돈다).
Framer.Device.rotateRight()
Device 24
Framer JS
Draggable
Layers can be made horizontally and/or vertically draggable. They can be tossed around
with momentum. To control where they end up, you can define a specific area that a layer
can be dragged within. They can optionally be dragged beyond this area, but they will then
bounce back by default.
layer.draggable.enabled <boolean>
Enable dragging for the layer.
레이어에 드래그를 사용할 수 있도록 함.
layerA = new Layer

layer.draggable.horizontal <boolean>
Enable or disable horizontal movement.
가로방향으로 입력되는 드래그를 활성화하거나 비활성화 한다.
layerA = new Layer

# Disable horizontal dragging

# 가로방향의 드래그 입력을 비활성화
layerA.draggable.horizontal = false
layer.draggable.vertical <boolean>
Enable or disable vertical movement.
세로방향으로 입력되는 드래그를 활성화하거나 비활성화 한다.
Draggable 25
Framer JS
layerA = new Layer

# Disable vertical dragging

# 세로방향의 드래 입력을 비활성화
layerA.draggable.vertical = false
layer.draggable.speedX <number>
Modify the horizontal dragging speed. The value is in pixels per mouse moved pixels. The
default value is 1. When set lower then 1 dragging will be slower than mouse movement and
vice versa. You can set the value to 0 to disable horizontal dragging.
가로방향 드래깅 속도를 조정한다. 속도 값은 픽셀 당 마우스가 움직이는 픽셀이다. 기본값은 1이
며, 1보다 작은 값으로 설정하면 마우스가 움직이는 속도도 작아진다. 0으로 설정한다면 가로 방향
의 드래깅을 비활성화한다.
layerA = new Layer

# Make horizontal dragging slow

# 가로방향 드래깅 속도를 느리게하기
layerA.draggable.speedX = 0.1
# Make horizontal dragging fast

# 가로방향 드래깅 속도를 빠르게하기
layerA.draggable.speedX = 10
layer.draggable.speedY <number>
Modify the vertical dragging speed. The value is in pixels per mouse moved pixels. The
default value is 1. When set lower then 1 dragging will be slower than mouse movement and
vice versa. You can set the value to 0 to disable vertical dragging.
세로방향 드래깅 속도를 조정한다. 속도 값은 픽셀 당 마우스가 움직이는 픽셀이다. 기본값은 1이
며, 1보다 작은 값으로 설정하면 마우스가 움직이는 속도도 작아진다. 0으로 설정한다면 세로 방향
의 드래깅을 비활성화한다.
Draggable 26
Framer JS
layerA = new Layer

# Make vertical dragging slow

# 세로방향 드래깅 속도를 느리게하기
layerA.draggable.speedY = 0.1
# Make vertical dragging fast

# 세로방향 드래깅 속도를 빠르게하기
layerA.draggable.speedY = 10
layer.draggable.constraints <object>
Constraints for the area this layer can be dragged within. If you also set the x and y
properties as constraints, the layer will snap to that position on DragStart. The layer will
animate to the new point on click.
해당 레이어의 특정 영역에 드래깅에 대한 제약을 줄 수 있다. 만약 제약사항으로 x, y의 속성을 설
정한다면, 해당 레이어는 드래깅 시작점으로 튈 것이다. 해당 레이어는 새로운 클릭 지점으로 움직
인다.
layerA = new Layer

# Set dragging constraints

# 드래깅 제약사항 설정
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
layer.draggable.constraintsOffset <object>
Get the offset position of a layer, compared to its dragging contraints. If you set the dragging
constraints to { x: 100, y: 100 }, the layer will still be initially positioned at x: 0, y: 0. After
dragging, the layer will be bound to its dragging contraints. This offset can be measured with
constraintsOffset
레이어 위치의 오프셋을 가져와서 드래깅 제약사항과 비교한다. 만약 여러분이 드래깅 제약사항을
{ x: 100, y: 100 }로 설정했다면, 레이어는 초기에 위치한 x: 0, y: 0에 여전히 있을 것이다. 하지만
드래깅한 후에는 레이어가 드래깅 제약사항의 위치로 바운드 한다. 이 오프셋은 constraintsOffset
에 의해 측정될 수 있다.
Draggable 27
Framer JS
layerA = new Layer


x: 100
y: 100
width: 200
height: 200
# Get the constraintsOffset

# constraintsOffset 가져오기
print layerA.draggable.constraintsOffset
# Returns { x:-100, y:-100 }
layer.draggable.isBeyondConstraints
<boolean>
See if the draggable layer is currently beyond its dragging constraints.

This property is read-only.
드래그 레이어가 현재 드래깅 제약사항이 있는지 확인한다.
이 속성은 읽기 전용이다.
layerA = new Layer


# 드래깅 제약사항 설정
x: 100
y: 100
width: 400
height: 400
# On move, see if the layer is beyond constraints or not

layerA.on Events.Move, ->
print layerA.draggable.isBeyondConstraints
layer.draggable.overdrag <boolean>
Enable or disable dragging beyond the set constraints.
제약사항이 설정된 드래깅을 활성화하거나 비활성화 한다.
Draggable 28
Framer JS
layerA = new Layer

x: 0
y: 0
width: 200
height: 200
# Disable dragging beyond constraints

# 제약사항이 있는 드래깅 비활성화
layerA.draggable.overdrag = false
layer.draggable.overdragScale <number>
Set the dragging resistance when dragging beyond constraints. The scale is defined with a
number between 0 and 1. The default value is 0.5.
드래깅에 제약사항이 있을 때 드래깅 resistance를 설정한다. 값의 범위는 0과 1 사이의 숫자로 정
의하며, 기본값은 0.5이다.
layerA = new Layer

x: 0
y: 0
width: 200
height: 200
# Increase resistance when dragging beyond constraints

# 드래깅에 제약사항이 있을 때 resistance 증가
layerA.draggable.overdragScale = 0.25
layer.draggable.momentum <boolean>
Enable or disable momentum/inertia simulation on DragEnd. Enabled by default
DragEnd의 momentum/inertia simulation을 활성화하거나 비활성화 한다. 기본값은 Enabled이
다.
Draggable 29
Framer JS
layerA = new Layer

# Disable momentum
# momentum 비활성화
layerA.draggable.momentum = false
layer.draggable.momentumOptions <object>
Options for momentum simulation on DragEnd.
DragEnd의 momentum simulation의 옵션.
layerA = new Layer

# Define friction and tolerance of momentum

# momentum의 friction과 tolerance 정의
layerA.draggable.momentumOptions =
friction: 2.1
tolerance: 0.1
layer.draggable.bounce <boolean>
Spring animation when momentum runs beyond constraints.
momentum 실행에 제약사항이 있을 때 Spring 애니메이션.
layerA = new Layer

x: 0
y: 0
width: 200
height: 200
# Snap back after dragging beyond constraints

# 제약사항에 의해 드래깅한 후 돌아오도록 하기
layerA.draggable.bounce = false
layer.draggable.bounceOptions <object>
Draggable 30
Framer JS
Options for the spring animations when momentum runs beyond constraints.
momentum 실행에 제약사항이 있을 때, spring 애니메이션의 옵션.
layerA = new Layer

x: 0
y: 0
width: 200
height: 200
# Define friction, tension and tolerance of bounce

# bounce의 friction, tension, tolerance를 정의함
layerA.draggable.bounceOptions =
friction: 40,
tension: 200,
tolerance: 0.0001
layer.draggable.velocity <object>
Current velocity for the draggable layer. The velocity is read-only.
드래그 레이어의 현재 velocity. velocity는 읽기 전용이다.
layerA = new Layer

# On DragMove, print the x and y velocity

layerA.draggable.on Events.DragMove, ->
print layerA.draggable.velocity
layer.draggable.direction <string>
Current dragging direction. Returns "up", "down", "left" or "right".
현재의 드래깅 방향. 리턴값은 "up", "down", "left" or "right"이다.
Draggable 31
Framer JS
layerA = new Layer

# Print the current direction

# 현재의 방향 출력하기
layerA.on Events.DragMove, ->
print layerA.draggable.direction
layer.draggable.angle <number>
Current angle (in degrees) for the draggable layer. This property is read-only.
드래그 레이어의 현재 각도. 이 속성은 읽기 전용이다.
layerA = new Layer

# Print the current angle

# 현재 각도 출력하기
print layerA.draggable.angle
layer.draggable.updatePosition(x <number> , y
<number> )
Returns: Object
Function to override the final value before setting it. Allows you to add your own behaviour to
a draggable. This allows you to create draggable layers that snap between certain
distances.
값을 설정하기 전에 최종 값을 override하기 위한 기능이다. 여러분은 드래그에 나만의 동작을 추
가 할 수 있다. 이것은 당신이 특정 거리를 사이의 스냅에 드래그 레이어를 만들 수 있습니다.
Draggable 32
Framer JS
layerA = new Layer

# Round numbers to a set amount

# 어림수로 양을 설정
round = (number, nearest) ->
Math.round(number / nearest) * nearest
# Drag in increments of 20px

layerA.draggable.updatePosition = (point) ->
point.x = round(point.x, 20)
point.y = round(point.y, 20)
return point
layer.draggable.directionLock <boolean>
Snap to horizontal/vertical direction after a certain threshold.
정해진 threshold 이후엔 가로/세로 방향으로 튄다.
layerA = new Layer

# Allow dragging only in one direction at a time

# 한 번에 한 방향으로만 드래깅하게 하기
layerA.draggable.directionLock = true
layer.draggable.directionLockThreshold
<object>
The thresholds for lock directions. The x and y values represent the distance you can drag in
a certain direction before it starts locking.
lock 방향의 thresholds. x, y 값은 거리를 나타내며, 여러분은 lock이 걸리기 시작한 지점의 직전까
지 거리만큼 드래그할 수 있다.
Draggable 33
Framer JS
layerA = new Layer

# Snap horizontally after dragging 50px

# Snap vertically instantly
# 50px 드래깅한 뒤 가로 방향으로 튀기
# 즉시 세로 방향으로 튀기
layerA.draggable.directionLock = true
layerA.draggable.directionLockThreshold =
x: 50
y: 0
layer.draggable.pixelAlign <boolean>
Snap to pixels while dragging to avoid subpixel-antialiasing.
layerA = new Layer

# Snap to pixel while dragging

layerA.draggable.pixelAlign = true
layer.draggable.isDragging <boolean>
Whether the layer is currently being dragged (returns false when animating).
레이어가 현재 드래그 되고 있는지 아닌지 확인한다. (애니메이션이면 리턴값은 false)
layerA = new Layer

# Check if the layer is being dragged

# 레이어가 드래그되고 있는지 체크
print layerA.draggable.isDragging
layer.draggable.isAnimating <boolean>
Draggable 34
Framer JS
Whether the layer is currently being animated by a momentum or bounce animation. This
property is read-only.
레이어가 현재 momentum이나 bounce animation에 의해 움직이고 있는 것인지 확인한다. 이 속
성은 읽기 전용이다.
layerA = new Layer

# Check if the layer is animating

# 레이어가 애니메이션에 의해 움직이고 있는지 체크
print layerA.draggable.isAnimating
layer.draggable.isMoving <boolean>
Whether the layer is currently moving, either by dragging or by a momentum/bounce
animation. This property is read-only.
레이어가 현재 dragging이나 momentum/bounce animation에 의해 움직이는 것인지 확인한다.
layerA = new Layer

# Check if the layer is moving

# 레이어가 움직이는지 체크
print layerA.draggable.isMoving
layer.draggable.offset
Returns: Object
Get the x and y position of the draggable layer, relative to the Screen.
스크린 상에서 드래그 레이어의 x, y 상대 좌표를 가져온다. 이 속성은 읽기 전용이다.
layerA = new Layer

# Get the x and y position of the layer

# 레이어의 x와 y 좌표를 가져온다.
print layerA.draggable.offset
Draggable 35
Framer JS
layer.draggable.layerStartPoint
Returns: Object
Get the x and y position of a draggable layer. This property is read-only.
드래그 레이어의 x, y 좌표를 가져온다. 이 속성은 읽기 전용이다.
layerA = new Layer

# On DragStart, get the current x and y position

# DragStart에서, 현재의 x와 y 좌표를 가져온다.
layerA.on Events.DragStart, ->
print layerA.draggable.layerStartPoint
layer.draggable.cursorStartPoint
Returns: Object
Get the x and y position of the cursor, relative to the Canvas. This property is read-only.
캔버스 상에서 커서의 x, y 상대 좌표를 가져온다. 이 속성은 읽기 전용이다.
layerA = new Layer

# On DragStart, get x and y position of the cursor

print layerA.draggable.cursorStartPoint
layer.draggable.layerCursorOffset
Returns: Object
Get the x and y position of the cursor, relative to the draggable layer. If you click in the top
left-corner, it returns { x: 0, y: 0 }. This property is read-only.
드래그 레이어 상에서 커서의 x, y의 상대좌표를 가져온다. 만약 여러분이 상단의 왼쪽 코너를 클릭
한다면, { x: 0, y: 0 }을 리턴할 것이다. 이 속성은 읽기 전용이다.
Draggable 36
Framer JS
layerA = new Layer

# Get the cursor position within the layer

# 레이어 안에서 커서의 좌표를 가져온다.
print layerA.draggable.layerCursorOffset
layer.draggable.propagateEvents <boolean>
Set the propagateEvents property of a draggable layer. Set to true by default. This is useful
when working with draggable layers within ScrollComponents or PageComponents, or
nested Components. 드래그 레이어의 propagateEvents 속성을 설정한다. 기본값은 true로 설정
된다. 이 기능은 ScrollComponents나 PageComponents, nested Components 내에서 드래그
레이어로 동작할 때 가장 효과적이다.
Let's say you'd like to have a draggable layer within the scroll.content layer. By default,
moving the layer will also move the scroll.content. This is because both layers will listen to
the dragging events. 여러분이 scroll.content layer 내에서 드래그 레이어를 만들길 원한다고 가
정해보자. 기본적으로, 레이어를 움직이려면 scroll.content도 움직여야 한다. 따라서 두 레이어가
드래깅 이벤트를 감지해야 한다.
To prevent any draggable subLayer from passing events to its superLayer, set
propagateEvents to false. This applies to all nested draggable layers.
이벤트를 통과한 어떤 드래그 서브레이어가 수퍼레이어가 되는 것을 방지하기 위해
propagateEvents를 false로 설정한다. 이것은 모든 중첩 드래그 레이어에 적용된다.
scroll = new ScrollComponent

width: Screen.width,
height: Screen.height
scroll.content.backgroundColor = "#28affa"
layerA = new Layer

superLayer: scroll.content,
backgroundColor: "#fff"
# Setting propagateEvents to false allows you to drag layerA

# layerA의 드래깅하기 위한 propagateEvents를 false로 설정
# without also scrolling within the ScrollComponent
# ScrollComponent의 스크롤 옵션도 제거
layerA.draggable.propagateEvents = false
Draggable 37
Framer JS
Events
Event는 여러분이 계속 감시해야 하는 발생 가능한 일을 뜻한다. 화면을 터치하거나 클릭하는 것과
같은 사용자 입력과 애니메이션이 끝나는 것과 같은 일들을 말한다. 대부분의 객체는 Framer내에
서 이벤트를 감지한다. 하지만 layer에서 발생하는 대부분의 이벤트에 대해서는 여러분이 감지해야
한다.
이벤트가 호출되면, 첫번째 인자는 이벤트 정보이다. 이벤트에 따라서 달라지는 값으로, 마우스 위
치, 마우스 델타 등과 같은 값을 포함한다. 두번째 인자는 항상 이벤트가 발생한 layer이다.
이벤트를 감지하려면 on 함수를 사용한다 :
layerA = new Layer

layerA.name = "Layer A"
layerA.on Events.Click, (event, layer) ->

print "Clicked", layer.name
# 출력: "Clicked", "Layer A"
이벤트 감지를 멈추려면 off 함수를 사용한다 :
layerA = new Layer

clickHandler = (event, layer) ->

print "Clicked", layer.name
layerA.on(Events.Click, clickHandler)
layerA.off(Events.Click, clickHandler)
Change events
The "change" event allows you to listen to properties as they're changing. Below is a full
overview of properties you can listen for:
"change" 이벤트는 속성이 바뀌는 것을 여러분이 감지하도록 허용한다. 아래는 여러분이 감지할
수 있는 속성들의 전체 리스트이다.
Events 38
Framer JS
이름 설명
"change:x" 새로운 x 좌표
"change:y" 새로운 y 좌표
"change:point" 새로운 x 혹은 y 좌표
"change:width" 새로운 너비(width) 값

"change:height" 새로운 높이(height) 값
"change:size" 새로운 너비(width) 혹은 높이(height) 값
"change:frame" 새로운 x, y, 너비(width) 혹은 높이(height) 값
"change:rotation" 새로운 회전(rotation) 값

"change:borderRadius" 새로운 굴곡(borderRadius) 값
"change:currentPage" 새로운 현재 페이지 값
"change:style" 새로운 style 선언
"change:html" 새로운 html 선언
"change:subLayers" subLayer를 추가하거나 삭제하기
"change:superLayer" superLayer를 추가하거나 삭제하기
For example, you can get the x position of a layer while it's animating. Note that it'll return
the exact, sub-pixel values. 예를 들어, 여러분은 애니메이션이 동작하는 동안 레이어의 x 좌표
를 얻어올 수 있다. 이 것은 사실, sub-pixel 값을 반환한다는 것을 기억해라.
layerA = new Layer
layerA.animate
properties:
x: 100
layerA.on "change:x", ->

print layerA.x
The "change" events can be used to link property changes to one another, using
Utils.modulate. In the example below, we'll rotate the layer. The returned values are used to
move the second layer horizontally.
"change" 이벤트는 Utils.modulate를 이용하여 변경된 속성을 링크하는 데에도 사용할 수 있다.
아래의 예에서 볼 수 있듯이, 우린 레이어를 회전시킬 것이다. 반환된 값은 두번째 레이어를 가로로
움직이는데 사용된다.
Events 39
Framer JS
layerA = new Layer

layerB = new Layer
x: 100
# 우리는 layerA를 0에서 180도로 회전시킨다.

layerA.animate
properties:
rotation: 180
# layerA의 회전값이 바뀌었을 때

layerA.on "change:rotation", ->
# Use the values to move layerB from 100 to 300

# layerB를 움직이기 위한 값을 100에서 300까지 사용한다.
x = Utils.modulate(layerA.rotation, [0, 180], [100, 300], true)
layerB.x = x
Events Object
Framer has a global Events object with events that you can listen to. Below is a full overview
of the Events object: Framer는 여러분이 감지할 수 있는 글로벌 이벤트 객체들을 가진다.
아래에서 이벤트 객체의 전체 리스트를 볼 수 있다.
이름 설명
Basic
Events.Click 클릭이나 터치 (모바일에서 딜레이 없음)
Events.TouchStart 클릭/터치 시작
Events.TouchMove 터치 움직임이나 마우스 드래그
Events.TouchEnd 클릭이나 터치 종료
Mouse
Events.MouseOver 마우스 움직이기

Events.MouseOut 마우스 멈추기
Animation
Events.AnimationStart 애니메이션 시작
Events.AnimationStop 애니메이션 멈춤
Events.AnimationEnd 애니메이션 종료 (reached end point)

Dragging
Events.Move 레이어가 움직인다
Events 40
Framer JS
Events.DragStart 드래그 시작
Events.Drag 드래그 움직이기
Events.DragEnd 드래그 종료
Events.DragAnimationDidStart Did start momentum/bounce animation

Events.DragAnimationDidEnd Did end momentum/bounce animation
Events.DirectionLockDidStart Did start lock direction.
Scroll
Events.Move 레이어가 움직인다

Events.ScrollStart 스크롤 시작
Events.Scroll 스크롤 중
Events.ScrollEnd 스크롤 종료
Events.ScrollAnimationDidStart Did start momentum/bounce animation
Events.ScrollAnimationDidEnd Did end momentum/bounce animation
States
새로운 상태로 전환할 예정 About to switch to a new
Events.StateWillSwitch
state
Events.StateDidSwitch 새로운 상태로 전환됨 Just switched to new state
Events.touchEvent(event )
Extract the touch event from a given event on mobile.
모바일에 입력된 이벤트로 터치 이벤트를 추출한다.
layerA = new Layer

myTouchEvent = Events.touchEvent(event)
Events.wrap(event )
Wrap a given DOM Element so we can keep track of the events and destroy them when
needed. If you want to bind events to arbitrary dom element you should use this.
Events.wrap(window).addEventListener "resize", (event) ->

print "Page is resizing"
Events 41
Framer JS
Events 42
Framer JS
Layers
Layers are the basic containers of Framer, which can contain images, videos, or text. You
can position layers with numeric values and dynamic values. Layers contain many properties
that define their appearance, such as opacity, rotation and scale. Layers can also be nested
to adjust their hierarchy.
Framer에서 기본이 되는 컨테이너인 Layer는, 이미지와 비디오 혹은 텍스트를 담고있다. 여러분
은 레이어를 숫자값과 동적 값에 따라 위치시킬 수 있따. 레이어는 많은 속성을 가지며 이는 투명
도, rotation and scale과 같이 보여지는 것으로 정의된다. 또한 레이어는 상속구조를 조정할 수 있
다.
To create a layer, use the new keyword. Every layer has a set of default properties: a blue
background, and a default width and height of 100.
new 로 layer를 생성한다. 모든 레이어는 다음과 같은 기본 속성을 가진다: 파란색 배경, 너비와 높
이 각각 100
layerA = new Layer
You can set layer properties when creating them:

layer를 생성하고 난 후에, 모든 layer의 속성값을 설정할 수 있다.
layerA = new Layer

x: 100
y: 100
width: 250
height: 250
opacity: 0.5 # 투명도
backgroundColor: "white"
And you can also override them later:
layerA = new Layer

x: 100
y: 100
# 생성 시에 주었던 y값을 오버라이딩

layerA.y = 200
# 생성 시에 주었던 투명도를 오버라이딩
layerA.opacity = 1
Layers 43
Framer JS
layer.id <number>
A unique identification number for this layer. No other layer will have this number. The layer
id is read only and cannot be changed.
해당 layer에 대한 유일무이한 숫자가 할당된다. 다른 layer는 이제 이값을 가질 수 없게 된다.
layer id는 읽기만 가능하고 한 번 할당되면 변경되지 않는 성질이 있다.
layerA = new Layer

print layerA.id
# 출력: 1
layer.name <string>
The layer name. This is not set by default but you can set it yourself. Imported layers from
Sketch and Photoshop will have the source layer group set.
해당 layer에 이름을 붙일 수 있다. 생성시에 기본 값이 주지 않으므로 여러분이 직접 이름을 지어
야한다. Sketch나 Photoshop에서 임포트한 layer는 해당 소스의 layer 그룹 집합을 갖게 된다.
layerA = new Layer

layerA.name = "Button"
print layerA.name
# 출력: "Button"
layer.x <number>
The x property of a layer defines its x position relative to the top left corner.
layer에서 x 속성은 x 좌표를 의미한다. x 좌표는 맨위 왼쪽을 0 기준으로 하는 상대 좌표이다.
layerA = new Layer

layerA.x = 500
layer.y <number>
The y property of a layer defines its y position relative to the top left corner.
layer에서 y 속성은 y 좌표를 의미한다. y 좌표는 맨위 왼쪽을 0 기준으로 하는 상대 좌표이다.
Layers 44
Framer JS
layerA = new Layer

layerA.y = 500
layer.z <number>
The z property of a layer defines its position in space, also known as depth. The larger this
value, the further away the object is from the point of view.
레이어의 z 속성은 공간 안에서의 좌표를 의미하며, 이는 깊이로 이해할 수 있다. 이 값이 커질수록,
개체 관점에서는 더 멀어진다.
Remember that you will have to enable perspective on a parent layer before you can see
this effect. Also note the z property is different from layer.index (z-index) which defines the
order for layers when they all have the same z value.
layerA = new Layer

layerA.z = 500
layer.width <number>
The width of the layer in pixels.
픽셀 상에서 레이어의 폭(너비).
layerA = new Layer

layerA.width = 500
layer.height <number>
The height of the layer in pixels.
픽셀 상에서 레이어의 높이.
layerA = new Layer

layerA.height = 500
layer.minX <number>
The left edge location of the layer. Same as layer.x.
레이어의 가장 왼쪽 모서리로, layer.x와 같다.
Layers 45
Framer JS
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.minX
# 출력: 100
layer.midX <number>
The horizontal center for the layer.
레이어 가로축의 중앙 좌표값.
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.midX
# 출력: 150
layerA.midX = 500
print layerA.x
# 출력: 450
layer.maxX <number>
The right edge location of the layer.
레이어의 가장 오른쪽 모서리 끝 좌표값.
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.maxX
# 출력: 200
layerA.maxX = 500
print layerA.x
# 출력: 400
Layers 46
Framer JS
layer.minY <number>
The top edge location of the layer. Same as layer.y.
레이어 가장 꼭대기의 위치. layer.y와 같다.
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.minY
# 출력: 100
layer.midY <number>
The vertical center for the layer.
레이어 세로축의 중앙값.
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.midY
# 출력: 150
layerA.midY = 500
print layerA.y
# 출력: 450
layer.maxY <number>
The bottom edge location of the layer.
레이어 가장 바닥의 위치.
Layers 47
Framer JS
layerA = new Layer

x: 100
y: 100
width: 100
height: 100
print layerA.maxY
# 출력: 200
layerA.maxY = 500
print layerA.y
# 출력: 400
layer.point <object>
Allows you to set or capture the x, and y values of a layer.
레이어의 x, y 값을 설정하거나 캡쳐해볼 수 있다.
layerA = new Layer
print layerA.point
# 출력: { x: 100, y: 100 }
layerA.point =
x: 10
y: 200
print layerA.point
# 출력: { x: 10, y: 200 }
print layerA.x
# 출력: 10
layer.size <object>
Allows you to set or capture the width and height values of a layer.
레이어의 너비나 높이 값을 설정하거나 캡쳐해볼 수 있다.
Layers 48
Framer JS
layerA = new Layer
print layerA.size
# 출력: { width: 100, height: 100 }
layerA.size =
width: 10
height: 10
print layerA.size
# 출력: { width: 10, height: 10 }
print layerA.width
# 출력: 10
layer.frame <object>
Allows you to set or capture the x, y, width and height values of a layer.
레이어의 x, y, 너비, 높이 값을 설정하거나 캡쳐해볼 수 있다.
layerA = new Layer
print layerA.frame
# 출력: { x: 100, y: 100, width: 100, height: 100 }
layerA.frame =
x: 10
y: 200
width: 10
height: 10
print layerA.frame
print layerA.x
# 출력: 10
layer.properties <object>
Gets or sets all properties for this layer.
해당 레이어의 모든 속성을 얻어오거나 설정할 수 있다.
Layers 49
Framer JS
layerA = new Layer
print layer.properties
# 출력: { x: 100, y: 100, ...}
layer.center()
Center this layer in its superlayer. If there is no superlayer it will be centered relative to the
screen.
레이어를 수퍼레이어의 중앙으로 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표에 의
해 중앙으로 위치한다.
layerA = new Layer

width: 500
height: 500
layerB = new Layer

superLayer: layerA
width: 100
height: 100
layerB.center()
print layerB.x, layerB.y

# 출력: 200, 200
layer.centerX(offset <number> )
Center this layer horizontally in its superlayer. If there is no superlayer it will be centered
relative to the screen. The offset is a pixel offset from the center and optional.
레이어를 수퍼레이어의 가로로 중앙에 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표
에 의해 중앙으로 위치한다. offset은 중앙 지점 픽셀의 오프셋 값으로 주어지며 옵션이다.
Layers 50
Framer JS
layerA = new Layer

width: 500
height: 500
layerB = new Layer

superLayer: layerA
width: 100
height: 100
layerB.centerX()
# 출력: 200, 0
layerB.centerX(20)
# 출력: 220, 0
layer.centerY(offset <number> )
Center this layer vertically in its superlayer. If there is no superlayer it will be centered
relative to the screen. The offset is a pixel offset from the center and optional.
레이어를 수퍼레이어의 수직으로 중앙에 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌
표에 의해 중앙으로 위치한다. offset은 중앙 지점 픽셀의 오프셋 값으로 주어지며 옵션이다.
layerA = new Layer

width: 500
height: 500
layerB = new Layer

superLayer: layerA
width: 100
height: 100
layerB.centerY()
# 출력: 0, 200
layerB.centerY(20)
# 출력: 0, 220
layer.pixelAlign()
Layers 51
Framer JS
Round the x and y values for this layer to whole numbers so it will be drawn exactly on the
pixel.
레이어의 x와 y 값을 반올림하고 정수로 표현하여 픽셀로 정확히 그릴 수 있도록 한다.
layerA = new Layer

x: 100.18293
y: 10.12873
layerA.pixelAlign()
print layerA.x, layerA.y

# 출력: 100, 10
layer.screenFrame <object>
Allows you to set or capture the absolute position of this layer on the screen, ignoring the
inherited coordinate system from its parents. Or, the exact position on the screen.
부모로부터 상속받은 좌표계를 무시하고 스크린 상의 레이어의 절대 위치를 설정하거나 캡처 할 수
있다. 또는 스크린 상의 정확한 위치.
layerA = new Layer

x: 100
layerB = new Layer

superLayer: layerA
x: 100
print layerB.screenFrame
layerB.screenFrame =
x: 400
y: 0
width: 100
height: 100
print layerB.x
# 출력: 300
layer.contentFrame()
Returns: Object
Layers 52
Framer JS
The calculated frame for the total size of all the subLayers combined.
모든 서브레이어를 하나로 합 프레임 전체의 크기를 계산한다.
layerA = new Layer

layerB = new Layer
superLayer: layerA
x: 0
width: 100
layerC = new Layer

superLayer: layerA
x: 100
width: 300
print layerA.contentFrame()
layer.centerFrame()
Returns: Object
The calculated frame centered in its superlayer. If there is no superlayer it will be centered
relative to the screen.
수퍼레이어의 중앙에 위치시켰을 때의 프레임을 계산한다. 만약 수퍼레이어가 없다면, 스크린의 상
대 좌표에 의해 중앙으로 위치한다.
layerA = new Layer

width: 500
height: 500
layerB = new Layer

superLayer: layerA
width: 100
height: 100
print layerB.centerFrame()
layer.backgroundColor <string>
Sets the background color for this layer. The color is expressed as a string in the css color
format. Layers have a default light blue background color so you can see them.
레이어의 배경색을 지정한다. 색상은 css 색상표에 있는 문자로 표현된다. 레이어들은 기본적으로
light blue 배경색을 가지며, 눈으로 레이어를 확인할 수 있다.
Layers 53
Framer JS
layerA = new Layer
layerA.backgroundColor = "red"
layerA.backgroundColor = "#00ff00"
layerA.backgroundColor = "rgba(134, 12, 64, 0.3)"
layerA.backgroundColor = "transparent"
# Remove the background color

# 배경색 없애기
layerA.backgroundColor = ""
layer.image <string>
Sets the background image url or path for this layer. You can set it as a local path or a full
url. If the image is hosted online, it can may a little while to load. The image will always fit to
cover the layer and never be stretched. Setting an image will remove the background color
of a layer. You can remove an image by setting it to null or an empty string. Local images will
not use the browser cache. You can be notified of when an image is loaded and ready to
display with the Events.ImageLoaded event. If there is an error loading an image (like not
found) it will throw an Events.ImageLoadError event.
레이어에 들어갈 배경 이미지의 url이나 경로를 지정한다. 여러분은 로컬 경로나 전체 url을 지정할
수 있다. 만약 이미지가 온라인에 있다면, 로드하는데 약간 시간이 소요된다. 이미지는 언제나 레이
어에 맞춰지며 절대 늘어나지 않는다. 이미지가 설정되면 레이어의 배경색은 없어진다. 여러분은
null이나 빈 문자열을 줌으로써 이미지를 삭제할 수 있다. 로컬 이미지는 브라우저 캐시를 사용하지
않는다.
layerA = new Layer
layerA.image = "images/logo.png"
layerA.image = "http://framerjs.com/logo.png"
# Listen to the loading event

# loading event를 감지한다.
layerA.on Events.ImageLoaded, ->
print "the image is loaded"
layerA.on Events.ImageLoadError, ->

print "the image could not be loaded"
layerA.image = "images/other-logo.png"
layer.visible <boolean>
Layers 54
Framer JS
Sets wether the layer should be visible or not.

레이어가 보이거나 안보이도록 설정한다.
layerA = new Layer

layerA.visible = false
layer.opacity <number>
Sets the opacity for this layer. Opacity is defined with a number between 0 and 1 where 0 is
invisible and 1 fully opaque.
레이어의 투명도를 설정한다. 투명도는 숫자 0과 1 사이 값으로 정의되며, 0은 투명해서 안보이고
1은 완전히 불투명하다.
layerA = new Layer

layerA.opacity = 0.5
layer.clip <boolean>
Sets wether the layer should clip its sublayers. Clipping is enabled by default.
Note that clipping with rounded corners enabled can be buggy, because the browser cannot
take the hardware accelerated rendering path. If you need it anyway you can enable
layer.force2d on all the sublayers that need to be clipped.
레이어가 서브레이어들을 클립하도록 설정한다. 클립핑은 기본적으로 활성화된다.
브라우저는 렌더링 패스를 하드웨어로 가속시킬 수 없기 때문에, 모서리를 둥글게하고 클리핑하면
버그가 생긴다는 점에 유의하라. 어쨌든, 만약 여러분이 그것을 필요로 하면, 여러분은 클립할 필요
가 있는 모든 서브 레이어에 대해 layer.force2d를 활성화 할 수 있다.
layerA = new Layer

width: 100
height: 100
layerB = new Layer

width: 200
height: 200
superLayer: layerA
layerA.clip = false
layer.ignoreEvents <boolean>
Layers 55
Framer JS
Sets wether the layer responds to any user events like click or touch. When disabled, no
user events on the layer will be emitted. The default value for this is true because
performance is better when layers don't have to account for events. Framer automatically
disables it when you add an event listener.
클릭하거나 터치하는 등의 사용자 이벤트를 발생시키면 레이어가 응답하도록 설정한다. 비활성화
되어있을 때, 어떠한 사용자 이벤트도 발생하지 않는다.
레이어가 계정이나 이벤트를 갖지 않을 때 성능이 가장 좋기 때문에 true를 기본값으로 한다. 여러
분이 이벤트 감지자를 등록하면 Framer는 이 값을 자동으로 비활성화한다.
layerA = new Layer
layerA.on Events.Click, ->

print "Click!"
# Now it won't respond to a click

# 클릭하면 응답하지 않는다.
layerA.ignoreEvents = true
# Now it will
# 이제 클릭하면 응답한다.
layerA.ignoreEvents = false
layer.force2d <boolean>
Sets wether the layer should only render 2d properties. This bypasses the GPU accelerated
rendering so can be slow to animate. When this is enables you cannot for example rotate in
3d space. The main purpose of this setting is to get advanced masking to work, like having a
mask with rounded corners.
레이어가 2d 속성만 제공하도록 설정한다. 이것은 애니메이션 속도가 느려질 수 있으므로 GPU의
렌더링 가속을 무시한다. 이 것이 활성화되어 있을 때, 여러분은 3d 공간에서 회전하는 등의 동작
은 할 수 없다. 이 설정의 주요 목적은 모서리를 둥글게 한 마스크를 갖는 것 같은 작업에 향상된 마
스킹을 얻는 것이다.
Layers 56
Framer JS
layerA = new Layer

width: 400
height: 400
layerB = new Layer

width: 300
height: 300
backgroundColor: "blue"
layerB.borderRadius = layerB.width / 2
layerA.force2d = true
layerA.superLayer = layerB
layer.originX <number>
Sets the x origin for scale, rotate and skew transformations. So for example point that a layer
rotates around. The origin is defined as a number between 0 and 1 where 0 is the most left
edge of the layer and 1 the most right edge. The default value is 0.5, the center of the layer.
scale, rotate, skew transformations를 하기 위한 x의 원점(origin)을 설정한다. So for example
point that a layer rotates around. 원점은 0과 1 사이의 숫자로 정의되며, 0이 레이어의 가장 왼쪽
모서리 값을, 1은 가장 오른쪽 모서리 값을 의미한다. 기본값은 0.5로, 레이어의 중앙이다.
layerA = new Layer

layerA.rotation = 45
layerA.originX = 0
layerA.originX = 1
layer.originY <number>
Sets the y origin for scale, rotate and skew transformations. So for example point that a layer
rotates around. The origin is defined as a number between 0 and 1 where 0 is the most top
edge of the layer and 1 the most bottom edge. The default value is 0.5, the center of the
layer.
scale, rotate, skew transformations를 하기 위한 y의 원점(origin)을 설정한다. So for example
point that a layer rotates around. 원점은 0과 1 사이의 숫자로 정의되며, 0이 레이어의 가장 꼭대
기 값을, 1은 가장 바닥 값을 의미한다. 기본값은 0.5로, 레이어의 중앙이다.
Layers 57
Framer JS
layerA = new Layer

layerA.originY = 0
layerA.originY = 1
layer.perspective <number>
Sets the perspective for child layers. Perspective gives depth to 3d properties like rotationX,
rotationY. The rotation is set from 1 to Infinity where 1 is a huge perspective. Setting
perspective to 0 gives you an isometric effect. Perspective is disabled by default.
Because of the way Safari renders, the perspective property can disable retina quality
rendering. I think this is a bug and will be solved at some point. When used with rotation
and/or animation you don't notice this too much though.
layer.perspective 는 하위 레이어의 원근감을 설정한다. 원근값은 rotationX나 rotationY와 같은
3d 속성에 깊이를 준다. 값은 1부터 무한대로 설정할 수 있고, 1이 가장 큰 원근감을 가진다. 원근
값을 0으로 설정하면, 회전하지 않고 수축하는 효과를 줄 수 있다. 원근값은 기본적으로 비활성화
되어 있다.
Because of the way Safari renders, the perspective property can disable retina quality
rendering. I think this is a bug and will be solved at some point. When used with rotation
and/or animation you don't notice this too much though.
layerA = new Layer
# Set the perspective for all sub layers

layerA.perspective = 100
layerB = new Layer

superLayer: layerA
rotationX: 30
rotationY: 30
layer.rotation <number>
Sets rotation for the layer relative to its transform origin. The rotation is defined in degrees
between 0 and 360.
원점을 기준으로 레이어의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설정할 수
있다.
layerA = new Layer

Layers 58
Framer JS
layer.rotationX <number>
Sets x rotation for the layer relative to its transform origin. The rotation is defined in degrees
between 0 and 360.
원점을 기준으로 레이어 x 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설
정할 수 있다.
layerA = new Layer

layerA.rotationX = 45
layer.rotationY <number>
Sets y rotation for the layer relative to its transform origin. The rotation is defined in degrees
between 0 and 360.
원점을 기준으로 레이어 y 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설
정할 수 있다.
layerA = new Layer

layerA.rotationY = 45
layer.rotationZ <number>
Sets z rotation for the layer relative to its transform origin. The rotation is defined in degrees
between 0 and 360. The z rotation is the same as layer.rotation.
원점을 기준으로 레이어 z 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설
정할 수 있다. z 좌표의 회전값은 레이어와 같다.
layerA = new Layer

layerA.rotationZ = 45
layer.scale <number>
Sets scale for the layer relative to its transform origin. The default scale is 1. Any number
smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 상대적인 scale을 설정한다. Scale의 기본값은 1이며, 1보다 작으면 크
기가 작아진다.
Layers 59
Framer JS
layerA = new Layer

layerA.scale = 2
layerA.scale = 0.5
layer.scaleX <number>
Sets the horizontal scale for the layer relative to its transform origin. The default scale is 1.
Any number smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 가로 길이를 설정한다. Scale의 기본값은 1이며, 1보다 작으면 사이가
작아진다.
layerA = new Layer

layerA.scaleX = 2
layerA.scaleX = 0.5
layer.scaleY <number>
Sets the vertical scale for the layer relative to its transform origin. The default scale is 1. Any
number smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 세로 길이를 설정한다. Scale의 기본값은 1이며, 1보다 작으면 사이가
작아진다.
layerA = new Layer

layerA.scaleY = 2
layerA.scaleY = 0.5
layer.superLayer <Layer object>

Sets the superlayer (or parent) for this layer. You can set the superlayer to null if you want
the layer to live at the root of your document.
레이어의 수퍼레이어(혹은 부모레이어)를 설정한다. 만약 해당 레이어를 root로 두고싶다면, 수퍼
레이어를 null로 설정할 수 있다.
Layers 60
Framer JS
layerA = new Layer

layerB = new Layer
layerB.superLayer = layerA
print layerB.superLayer
# 출력: <Object:Layer layerA>
layer.subLayers <array>
All the sub (or child) layers for this layer.
해당 레이어의 모든 서브레이어.
layerA = new Layer
layerB = new Layer

superLayer: layerA
layerC = new Layer

superLayer: layerA
print layerA.subLayers
# 출력: [<Object:Layer layerB>, <Object:Layer layerC>]
layer.subLayersByName(name <string> )
Returns: Array with Layer Objects
All the sub (or child) layers for this layer filtered by name.
해당 레이어의 모든 서브레이어를 이름으로 필터링할 수 있다.
layerA = new Layer
layerB = new Layer

name: "navigation"
superLayer: layerA
layerC = new Layer

name: "button"
superLayer: layerA
print layerA.subLayersByName("button")
# 출력: [<Object:Layer layerC>]
Layers 61
Framer JS
layer.addSubLayer(layer <Layer object> )

Add a layer as a sublayer to this layer. This will change the superlayer of the added
sublayer.
해당 레이어에 서브레이어를 추가한다. 서브레이어로 추가되면 수퍼레이어가 바뀐다.
layerA = new Layer

layerB = new Layer
layerA.addSubLayer(layerB)
# 출력: <Object:Layer layerA>
layer.removeSubLayer(layer <Layer object> )

Remove a layer from the sublayers of this layer.
해당 레이어의 서브레이어를 삭제한다.
layerA = new Layer

layerB = new Layer
superLayer: layerA
layerA.removeSubLayer(layerB)
# 출력: null
layer.siblingLayers()
Returns: Array with Layer Objects
All the layers that are also sublayers of the same superlayer. So layers that are at the same
place in the layer hierarchy.
같은 수퍼레이어의 모든 서브레이어를 보여준다. 해당 레이어와 같은 계층에 위치하고 있는 다른
레이어들을 볼 수 있다.
Layers 62
Framer JS
layerA = new Layer
layerB = new Layer

superLayer: layerA
layerC = new Layer

superLayer: layerA
print layerB.siblingLayers()
# 출력: [<Object:Layer layerC>]
layer.index <number>
The order index for this layer. Sibling layers with a higher index (and the same z value) will
drawn on top of this layer, and those with a lower index below.
The layer index increases by order of insertion. So if you add a layer as a sublayer and the
highest sibling index value is 5, the index of the inserted layer will be 6 (5 + 1). Or, the last
inserted layer will always be on top.
해당 레이어의 인덱스 순서를 지정한다. 높은 인덱스(z 값과 같다)의 형제 레이어는 가장 상위에 그
려지며, 낮은 인덱스는 아래에 그려진다.
레이어의 인덱스는 추가되는 순서대로 증가한다. 따라서 만약 레이어를 서브레이어로 추가하면서
인덱스를 5로 준다면, 추가된 레이어의 인덱스는 5(5+1)이다. 혹은 가장 마지막에 추가된 레이어가
항상 맨 위에 놓여진다.
layerA = new Layer

layerB = new Layer
# Draw layerB on top

layerA.index = 2
layerB.index = 1
layer.placeBefore(layer <Layer object> )

Places this layer before another layer. This changes the layer.index property for at least one
of the layers. This method only works on layers that have the same superlayer, or no
superlayer at all.
해당 레이어를 다른 레이어보다 앞으로 위치시킨다. 이는 레이어들 중 최소한 레이어 하나의
layer.index 속성을 변경하는 것이다. 이 방법은 같은 수퍼레이어 아래에 있거나, 수퍼레이어가 없
는 레이어에서만 사용할 수 있다.
Layers 63
Framer JS
layerA = new Layer

layerB = new Layer

layerB.placeBefore(layerA)
layer.placeBehind(layer <Layer object> )

Places this layer behind another layer. This changes the layer.index property for at least one
of the layers. This method only works on layers that have the same superlayer, or no
superlayer at all.
해당 레이어를 다른 레이어보다 뒤로 위치시킨다. 이는 레이어들 중 최소한 레이어 하나의
layer.index 속성을 변경하는 것이다. 이 방법은 같은 수퍼레이어 아래에 있거나, 수퍼레이어가 없
는 레이어에서만 사용할 수 있다.
layerA = new Layer

layerB = new Layer

layerA.placeBehind(layerB)
layer.bringToFront()
Places this layer in front of all other layers with the same superlayer.
같은 수퍼레이어 하에 있는 모든 레이어보다 가장 앞으로 레이어를 위치시킨다.
layerA = new Layer

layerB = new Layer
layerC = new Layer
# Draw layerA on top

layerA.bringToFront()
layer.sendToBack()
Places this layer behind all other layers with the same superlayer.
같은 수퍼레이어 하에 있는 모든 레이어보다 가장 뒤로 레이어를 위치시킨다.
Layers 64
Framer JS
layerA = new Layer

layerB = new Layer
layerC = new Layer
# Draw layerC last

layerC.sendToBack()
layer.html <string>
Insert arbitrary html into this layer. The html can be anything, from simple text, to form
elements to canvas or svg content.
If you need to target any of the created elements, remember that they are only available
after Framer rendered them (just like document.ready in jQuery). To reliably get a reference
to a dom element in the layer.html use layer.querySelector or layer.querySelectorAll. If the
html content that gets inserted needs user interaction, it is smart to set layer.ignoreEvents to
false. Framer tries to do it automatically for some elements. Note that to retain the layer
structure the html will actually be inserted in a special element that gets created when you
set html for the first time.
레이어에 임의로 html을 추가한다. html에는 아주 간단한 텍스트부터 canvas나 svg 컨텐츠 같은
form element까지 무엇이든 추가할 수 있다.
만약 여러분이 만들어낸 elements 중 하나를 추가하고 싶다면, Framer가 그것들을 렌더링 한 후
에만 사용할 수 있다는 점을 기억하자(jQuery의 document.ready와 같이). layer.html에서
layer.querySelector 나 layer.querySelectorAll를 사용해봄으로써 dom element에 대해 확실히
이해할 수 있다.
html 컨텐츠에 사용자 인터렉션을 추가하고자 한다면, layer.ignoreEvents를 false로 설정함으로
써 수행할 수 있다. Framer에서는 이를 포함하여 몇몇 elements를 자동으로 수행한다. Note that
to retain the layer structure the html will actually be inserted in a special element that gets
created when you set html for the first time.
layerA = new Layer
# Add simple text content

layerA.html = "Hello"
# Add inline styled text content

layerA.html = "I'm <span style='color:red'>Koen</span>"
# Add an input field

layerA.html = "<input type='text' value='Hello'>"
# Add a div with a canvas element and get a reference

layerA.html = "<div><canvas id='canvas'></canvas></div>"
canvasElement = layerA.querySelectorAll("#canvas")
Layers 65
Framer JS
layer.style <object>
Set or get css style properties for the layer.
Most of the style properties are managed by Framer internally so it is preferred that you use
those when you can (for example layer.backgroundColor vs layer.style["background-color"]).
The reason for this is that it's slow to read the values from the dom so to keep animations
fast we keep a cache.
Next to the standard css property names you can also camelCase naming. So
layer.style["border-color"] is the same as layer.style.borderColor. For a full list see this
overview.
레이어의 css style 속성을 설정하거나 얻어온다. style 속성의 대부분은 Framer 내부적으로 관리
된다(예시. layer.backgroundColor vs layer.style["background-color"]). 그 이유는 dom에서 값을
읽어오면 느리기 때문에,캐시를 유지해 애니메이션을 빠르게 유지한다.
css 표준 속성의 이름은 camelCase 네이밍 룰을 사용할 수 있다. 따라서 layer.style["border-
color"]는 layer.style.borderColor와 같다. 전체 리스트는 여기에서 볼 수 있다.
layerA = new Layer
# Modify a single style property

layerA.style["outline"] = "1px solid red"
# Modify set of style properties

layerA.style =
"outline": "1px solid red",
"padding": "10px"
# Get a specific style property

print layerA.style["outline"]
# 출력: "1px solid red"
layer.computedStyle()
Returns: Object
Get all the current applied css style properties for the layer, directly and defined by css rules.
Note that this is an expensive operation for the browser.
For a full reference on computed style, see this overview.
현재 레이어에 적용된 css style 모든 속성을 즉시 읽어오고, css 룰에 의해 정의된다. 단, 브라우저
에 부하가 많이 걸리는 작업임을 명심하자.
computed style에 대한 전체 레퍼런스는 여기에서 확인할 수 있다.
Layers 66
Framer JS
layerA = new Layer

layerA.backgroundColor = "red"
print layer.computedStyle()["background-color"]
# 출력: "red"
layer.classList <ClassList object>

A list of class attributed for the layer. Also contains methods to add, remove, toggle and
check for classes. For a full reference, see this overview.
레이어에 속한 classList를 위한 개체이다. 클래스의 추가, 삭제, 토글, 체크하기 위한 메소드를 추
가할 수 있다.
전체 레퍼런스는 여기에서 확인할 수 있다.
layerA = new Layer
# Add the class .red

layerA.classList.add("red")
# Remove the class .red

layerA.classList.remove("red")
# Toggle the class .red

layerA.classList.toggle("red")
# See if the layer has class .red

print layerA.classList.contains("red")
# 출력: true
layer.destroy()
This will remove a layer from the hierarchy and remove all its listeners. If the layer has
sublayers they will be destroyed too.
현재 있는 계층에서 레이어를 삭제하고, 모든 감지자를 삭제한다. 만약 삭제하려는 레이어가 서브
레이어를 가지고 있다면, 서브레이어도 모두 없어진다.
layerA = new Layer

layerA.destroy()
layer.copy()
Layers 67
Framer JS
Returns: Layer object
This will copy a layer and all its sublayers. The layers will have all the same properties as
their copied counterparts (same position and looks). The event listeners will not be copied.
layer.copy()는 레이어와 모든 서브레이어를 복사한다. 복사된 레이어들의 모든 속성은 기존 레이
어와 동일하다(위치, 모양 등 모두 같다). 이벤트 감지자는 복사되지 않는다.
layerA = new Layer

layerB = new Layer superLayer:layerA
layerC = layerA.copy()
layer.copySingle()
Returns: Layer object
This will copy a layer without its sublayers. The event listeners will not be copied.
layer.copySingle()를 사용하면 서브레이어는 제외하고 복사한다. 이벤트 감지자는 복사하지 않는
다.
layerA = new Layer

layerB = new Layer
superLayer: layerA
layerC = layerA.copySingle()
layer.blur <number>
Adds a gaussian blur to the layer. Gaussian blur is defined in pixels. The default value is 0.
레이어에 Gaussian blur 효과를 준다. Gaussian blur는 픽셀에 지정되며, 기본값은 0이다.
layerA = new Layer

layerA.blur = 10
layer.brightness <number>
Brightens or darkens a layer. Brightness is defined with a number. Setting brightness to zero
produces a completely black layer, while the value that produces a completely white layer
depends on the color of your layer or image.
Layers 68
Framer JS
레이어에 명암을 준다. layer.brightness는 숫자로 표현한다. 밝기를 0으로 주면 완전히 까만 레이

어가 되고, 반면에 완전 하얀 레이어를 만드는 것은 여러분이 만든 레이어나 이미지의 색상에 달려
있다.
layerA = new Layer

layerA.brightness = 10
layer.saturate <number>
Saturates a layer. Saturation is defined with a number between 0 and 100 where 0 removes
all saturation and 100 is default.
레이어의 채도를 조절한다. layer.saturate는 0과 100 사이 값으로 지정하며, 0이면 모든 채도를 없
애고 100이 기본값이다.
layerA = new Layer

layerA.saturate = 50
layer.hueRotate <number>
Sets the hue of a layer. The hue rotation is defined in degrees between 0 and 360. The
default value is 0.
레이어의 색조(hue)를 설정한다. layer.hueRotate은 0부터 360도 사이의 값으로 지정하며, 기본값
은 0이다.
layerA = new Layer

layerA.hueRotate = 180
layer.contrast <number>
Sets the contrast of a layer. Contrast is defined with a number between 0 and 100 where 0 is
removes all contrast. The default value is 100.
레이어의 대비(contrast)를 설정한다. layer.contrast는 0부터 100 사이의 값으로 지정하며, 0은 모
든 contrast를 없앤다. 기본값은 100이다.
layerA = new Layer

layerA.contrast = 50
Layers 69
Framer JS
layer.invert <number>
Inverts the color of a layer. Invert is defined with a number between 0 and 100. The invert
property inverts all colors and brightness values of a layer. Setting invert to 100 on a colored
layer replaces all hues with their complementary colors. The default value is 0.
레이어의 색상을 반전한다. layer.invert는 0부터 100 사이의 값으로 지정한다. invert 속성은 모든
색상과 레이어의 밝기 값을 반전시킨다. 색상이 있는 레이어에 invert 값을 100으로 설정하면 모든
색상이 그들의 보색으로 변경된다. 기본값은 0이다.
layerA = new Layer

layerA.invert = 100
layer.grayscale <number>
Grayscale converts all colors to gray. Grayscale is defined with a number between 0 and
100 where 100 turns all colors to a shade of gray. The default value is 0.
레이어의 모든 색상을 회색으로 바꾼다. layer.grayscale은 0부터 100 사이의 숫자로 지정하며,
100은 모든 색상을 회색으로 바꾼다. 기본값은 0이다.
layerA = new Layer

layerA.grayscale = 100
layer.sepia <number>
Adds a sepia tone to your layer. Sepia is defined with a number between 0 to 100. The
default value is 0.
레이어에 세피아 톤을 준다. layer.sepia은 0부터 100 사이의 숫자로 지정하며, 기본값은 0이다.
layerA = new Layer

layerA.sepia = 100
layer.shadowX <number>
Defines the shadow direction on the x-axis. A positive value will produce a shadow from the
right edge of a layer, whereas a negative value will produce a shadow from the left edge. A
visible shadow will only appear if the shadowColor property is also defined.
Layers 70
Framer JS
x축에 그림자 방향을 지정한다. 양수 값은 레이어의 오른쪽 가장자리에 그림자를 생성하고, 음수

값은 왼쪽 가장자리에 그림자를 생성한다. 그림자는 shadowColor 속성이 지정되었을 때만 보인
다.
layerA = new Layer

layerA.shadowX = 10
layer.shadowY <number>
Defines the shadow direction on the y-axis. A positive value will produce a shadow from the
bottom edge of a layer, whereas a negative value will produce a shadow from the top edge.
A visible shadow will only appear if the shadowColor property is also defined.
y축에 그림자 방향을 지정한다. 양수 값은 레이어의 오른쪽 가장자리에 그림자를 생성하고, 음수
값은 왼쪽 가장자리에 그림자를 생성한다. 그림자는 shadowColor 속성이 지정되었을 때만 보인
다.
layerA = new Layer

layerA.shadowY = 10
layer.shadowBlur <number>
Adds a Gaussian blur to the shadowX or shadowY property. shadowBlur is defined with a
number. The default value is 0.
shadowX나 shadowY 속성에 Gaussian blur 효과를 준다. layer.shadowBlur는 숫자로 지정되며,
기본값은 0이다.
layerA = new Layer

layerA.shadowY = 1
layerA.shadowBlur = 4
layer.shadowSpread <number>
Makes shadows larger in all directions. The shadow is expanded by the given value.
Negative values cause the shadow to contract. If shadowX, shadowY and shadowBlur are
all set to 0, this will appear as a border. A visible shadow will only appear if the shadowColor
property is also defined.
Layers 71
Framer JS
모든 방향에 대해 더 큰 그림자를 만든다. 그림자는 지정하는 값에 의해 확장된다. 음수 값은 그림

자를 수축시킨다. 만약 shadowX, shadowY, shadowBlur가 모두 0으로 설정되면, 그림자는 선으
로 보인다. shadowColor 속성이 지정되었을 때만 그림자가 보인다.
layerA = new Layer

layerA.shadowY = 1
layerA.shadowSpread = 2
layer.shadowColor <string>
Sets the color of a layers shadow. The color is expressed as a string in the CSS color
format.
레이어 그림자의 색상을 설정한다. 색상은 CSS 색상표의 문자열로 표현된다.
layerA = new Layer

layerA.shadowY = 1
layerA.shadowColor = "rgba(0,0,0,0.2)"
layer.borderRadius <number>
Rounds the corners of a layer in pixels. To create circles, set the property to a high value
(50-100) or divide the layers width/height by two.
레이어의 코너를 둥글게 한다. 원을 만들려면, 50-100 정도 되는 높은 값을 속성으로 주거나 레이
어의 width나 height를 2로 나눈다.
layerA = new Layer

layerA.borderRadius = 3
# To create a circle:
# 원 만들기
layerA.borderRadius = layerA.width/2
layer.animate(options <object> )
Returns: Animation object
Layers 72
Framer JS
Start animating this layer. The animation options describe the properties it needs to animate
to and how to animate. Running this method will create a new Animation object with the
options and return it. You can use the Animation object to for example stop or reverse the
animation. For a full description of the animation options see this overview.
레이어의 애니메이션을 시작한다. 애니메이션 옵션의 속성은 움직임을 주고, 어떻게 움직일 것인지
를 서술한다.
이 메소드를 실행하면 옵션이 포함된 새로운 애니메이션 객체를 생성하고 반환한다. 이 애니메이션
객체를 사용해서 멈추거나 반전하는 애니메이션 효과를 사용할 수 있다.
여기에서 애니메이션 옵션의 모든 설명을 볼 수 있다.
layerA = new Layer
# Animate the layer to the right

# 레이어를 오른쪽으로 움직이게 하기
layerA.animate
properties:
x: 100
# Animate multiple properties

# 애니메이션 속성 여러개 주기
layerA.animate
properties:
x: 100
opacity: 0.5
# Animate the layer to the right in 5 seconds

# 레이어를 오른쪽으로 5초 동안 움직이게 하기
layerA.animate
properties:
x: 100
time: 5
# Repeat an animation 5 times

# 애니메이션 5번 반복
layerA.animate
properties:
x: 100
repeat: 5
# Start an animation after 5 seconds

# 애니메이션을 5초 후에 시작하기
layerA.animate
properties:
x: 100
delay: 5
# Animate the layer with a spring curve

# 레이어에 spring curve 애니메이션 주기
layerA.animate
properties:
Layers 73
Framer JS
x: 100
# Animate the layer with a bezier curve

# 레이어에 bezier curve 애니메이션 주기
layerA.animate
properties:
x: 100
curve: "ease-in-out"
# Animate the layer with a custom bezier curve

# See: http://easings.net/#easeInOutQuint
# 레이어에 custom bezier curve 애니메이션 주기
# 보기: http://easings.net/#easeInOutQuint
layerA.animate
properties:
x: 100
curve: "cubic-bezier(0.86, 0, 0.07, 1)"
# Stop an animation immediately

# 애니메이션 즉시 멈추기
animationA = layerA.animate
properties:
x: 100
animationA.stop()
# Listen for an animation to start, stop or end

# 애니메이션 시작하고, 멈추고, 끝내도록 감지하기
layerA.on Events.AnimationStart, ->
print "Animation started"
layerA.on Events.AnimationStop, ->

print "Animation stopped"
layerA.on Events.AnimationEnd, ->

print "Animation ended"
layerA.animate
properties:
x: 100
layer.animateStop()
Stop all running animations on this layer immediately.
레이어에서 실행 중인 모든 애니메이션 즉시 멈추게 하기
Layers 74
Framer JS
layerA = new Layer
# Stop an animation immediately

# 애니메이션 즉시 멈추기
layerA.animate
properties:
x: 100
layerA.animateStop()
layer.animations()
Returns: Array with Animation Objects
Returns all the current running animations for this layer

레이어에서 현재 실행 중인 모든 애니메이션 반환하기
layerA = new Layer
layerA.animate
properties:
x: 100
layerA.animate
properties:
y: 100
print layerA.animations()
# 출력: [<Object Animation>, <Object Animation>]
layer.isAnimating <boolean>
See if a layer is animating. This property is readonly.
레이어의 애니메이션이 있는지 보기. 이 속성은 읽기 전용이다.
layerA = new Layer
layerA.animate
properties:
x: 100
print layerA.isAnimating
# Result: True
# 결과: True
Layers 75
Framer JS
layer.on(eventName <string> , handler

<function> )
Start listening for an event on this layer. For a full list of events see this overview.
When an event is called the first argument is the event information. Depending on the
specific event this can contain mouse positions, mouse deltas etc. The second argument is
always the layer that the event occurred to.
해당 레이어의 이벤트를 감지하기 시작한다. 모든 이벤트의 리스트는 여기에서 볼 수 있다.
이벤트가 첫번째 인자로 주어질 때, 이벤트 정보를 의미한다. 이벤트에 따라 마우스 위치, 마우스의
델타 값 등을 포함할 수 있다. 두 번째 인자는 항상 이벤트가 발생한 레이어를 포함한다.
layerA = new Layer


print "This layer was clicked", layer.name
# Output: "This layer was clicked", "Layer A"

# 출력: "This layer was clicked", "Layer A"
layer.off(eventName <string> , handler

<function> )
Stop listening for an event on this layer. For a full list of events see this overview.
해당 레이어의 이벤트를 감지하는 것을 멈춘다. 모든 이벤트의 리스트는 여기에서 볼 수 있다.
layerA = new Layer

clickHandler = (event, layer) ->

print "This layer was clicked", layer.name
layerA.on(Events.Click, clickHandler)
layerA.off(Events.Click, clickHandler)
Layers 76
Framer JS
Modules
Modules allow you to separate and organize parts of your prototype across different files.
They're JavaScript or CoffeeScript files, which you can include (require) within your
prototype. They help you organize your code, and choose what parts to focus on.
Modules는 다른 파일들에 나뉘어져 있는 프로토타입을 분리하고 조직화하는 것을 허용한다. 그들
은 JavaScript 혹은 CoffeeScript 파일이며, 프로토타입 내에 포함시킬 수 있다. 그들은 여러분이
코드를 조직화하도록 돕고, 어떤 부분에 포커스하고 있는지 선택한다.
You can find them in the /modules folder of your prototype. Modules are based on
JavaScript and Node.js standards. Everything that you've prefixed with exports in your
module will be available in your prototype. The require keyword imports your module.
여러분은 그들을 /modules 폴더에서 찾을 수 있다. 모듈은 JavaScript와 Node.js 표준에 기반한
다. 여러분은 이를 exports 를 붙여 프로토타입에서 사용할 수 있다. require 키워드를 사용하며
모듈을 import할 수 있다.
If you want to add modules to an older project, we advice to create a new project in the
latest Framer Studio, and copy over your files.
만약 여러분이 예전 프로젝트에 모듈을 추가하고싶다면, 우리는 가장 최신의 Framer Studio 내에
서 새로운 프로젝트를 만들거나 파일들을 복사할 것을 권한다.
Get Started
시작하기
Create a new project in Framer Studio
Navigate to the /modules folder and open the myModule.coffee file in a text-editor.
To include the module within your project, add the following:
Framer Studio에서 새로운 프로젝트 생성하기
/modules 폴더를 찾아 들어가서 myModule.coffee 파일을 텍스트 에디터로 열기
모듈을 프로젝트에 추가하기
# To include myModule.coffee in our prototype

# myModule.coffee 파일을 우리 프로토타입에 추가하기
module = require "myModule"
Modules 77
Framer JS
Make sure to save your file and refresh your prototype to see changes. Modules can contain
anything. For example, you can create Layers within your modules, or define specific
interactions within functions.
추가한 후엔 파일을 저장하고 새로고침하여 프로토타입이 바뀌었는지 확인한다. 모듈은 어떤 것이
든 포함할 수 있다. 예를 들어, 여러분은 모듈 내에 레이어를 생성할 수 있고, 특정한 인터렉션들을
함수 내에 정의할 수 있다.
# Store variables
# 변수 저장하기
exports.myVar = "myVariable"
# Create functions
# 함수 생성하기
exports.myFunction = ->
print "I'm running!"
# Create Arrays
# Array 생성하기
exports.myArray = [1, 2, 3]
# Create Layers
# 레이어 생성하기
exports.mylayerA = new Layer
In the example above, a new layer is automatically created and included within our
prototype. To also run the function, you can write:
예를 들어, 새로운 레이어는 자동으로 생성되어 프로토타입에 추가된다. 또, 함수를 실행하려면 여
러분은 이렇게 쓸 수 있다:
# To include myModule.coffee
# myModule.coffee 포함하기
# Run the function, printing "I'm running!"

# 함수 실행하고 "I'm running!" 출력하기
module.myFunction()
Example: Interactions
사례: Interactions
Modules 78
Framer JS
Let's create a simple draggable interaction within a module. In our myModule.coffee file, we
include the following function. It takes a layer, makes it draggable, and snaps it back to its
original position on DragEnd.
모듈 안에 간단한 드래깅 인터렉션을 만들자. 우리는 myModule.coffee 파일 안에 following
function을 포함한다.
# A draggable function without our module

exports.makeDraggable = (layer) ->
layer.draggable.enabled = true
# Store current x and y position

startX = layer.x
startY = layer.y
# Animate back on DragEnd

layer.on Events.DragEnd, ->
this.animate
properties:
x: startX
y: startY
curve: "spring(300,20,0)"
Now, within our prototype, we can call the makeDraggable function from our module to
include the dragging interaction.
# Include module
# Set background
backgroundColor: "#28AFFA"
# Create a new layer

layerA = new Layer
borderRadius: 4
layerA.center()
# Add the dragging interaction to layerA

module.makeDraggable(layerA)
Example: NPM
Modules 79
Framer JS
Framer Studio modules work with NPM, a package manager where thousands of JavaScript
packages are published. Let's import the Backbone library. Make sure you already have
NPM installed.
# In your terminal
cd ~/my-framer-project
npm install backbone
Create a new module in /modules, and name it npm.coffee. Beware that if you name the file
the same as the NPM module (like backbone.coffee), you could run into a recursive import
problem.
# File: modules/npm.coffee
exports.backbone = require "backbone"
After a refresh, you can import underscore into your project.
# Import the backbone module from your npm index

backbone = require("npm").backbone
# Or use this nice shortcut, which is the exact same

{backbone } = require "npm"
Modules 80
Framer JS
PageComponent
PageComponent는 ScrollComponent를 기반으로 한다. 하지만 연속된 콘텐츠를 페이지 형태로
보여주기 위해서 만들어졌다. 다른 크기의 콘텐츠 layer각 가지더라도 지원하며, 위치와 스크롤 속
도에 따라서 layer로 스냅사진처럼 보여지게 할 수 있다.
# Create a new PageComponent and only allow horizontal scrolling.

page = new PageComponent
width: Screen.width
scrollVertical: false
# Define the first page

pageOne = new Layer
width: page.width
height: page.height
superLayer: page.content
자 이제 2번째 페이지를 만들어보자. 추가 정보는 addPage method.를 참고하자.
# Define second page

pageTwo = new Layer
width: page.width
height: page.height
backgroundColor: "#90D7FF"
# Add the second page to the right

page.addPage(pageTwo, "right")
컨텐츠를 추가하는 또 다른 방법은 for-loop을 사용하는 것이다.
PageComponent 81
Framer JS

width: Screen.width
scrollVertical: false
# Create 5 new layers and add them to the page.content

for number in [0...5]
pageContent = new Layer
width: page.width
height: page.height
x: page.width * number
backgroundColor: Utils.randomColor(0.5)
# Visualize the current page number

pageContent.html = pageContent.html = number + 1
# Center the current page number

pageContent.style =
"font-size" : "100px",
"font-weight" : "100",
"text-align" : "center",
"line-height" : "#{page.height}px"
page.originX <number>
origin은 0 과 1 사이 값을 갖는다. 0 은 왼쪽 모서리이고 1 은 오른쪽 모서리를 뜻한다. 기본값
은 0.5 고 중앙이다.
originX 값은 페이지가 어떻게 수평으로 스냅효과를 낼지를 정의한다. originX를 조정하는 효과는
페이지의 높이가 PageComponent보다 작을 때만 가능하다.

page.originX = 0
page.originY <number>
origin은 0 과 1 사이 값을 갖는다. 0 은 왼쪽 모서리이고 1 은 오른쪽 모서리를 뜻한다. 기본값
은 0.5 고 중앙이다.
originY 값은 페이지가 어떻게 수직으로 스냅효과를 낼지를 정의한다. originY를 조정하는 효과는
페이지의 폭이 PageComponent보다 작을 때만 가능하다.
PageComponent 82
Framer JS

page.originY = 0
page.velocityThreshold <number>
The velocityThreshold influences the role velocity plays in snapping to a different page.
Besides the scrolling distance, the PageComponent also takes your scrolling speed
(velocity) into account.

page.velocityThreshold = 0.2
To better understand the effects of adjusting the velocityThreshold, you can print out your
velocity after scrolling. If you want switching between pages to be based mostly on distance,
increase the velocityThreshold.
# Increase the velocityThreshold

page.velocityThreshold = 5
# After switching between pages, print the velocity

page.on Events.ScrollEnd, ->
print Math.abs(page.velocity.x)
page.animationOptions <object>
Set the animation options for the PageComponent. This defines the animation that occurs on
ScrollEnd, when snapping to a page.
page.animationOptions =
curve: "ease"
time: 0.25
page.currentPage
Returns Layer Object
Get the current page layer. This property is read-only.
PageComponent 83
Framer JS
# Get the current page layer

print page.currentPage
Note that you have to have pages within the page.content layer. You can also listen to the
"change:currentPage" event to get the new currentPage, after it has been changed.
# When the current page changes, print the new one

page.on "change:currentPage", ->
print page.currentPage
page.closestPage
Returns: Layer Object
Get the closest page layer. This property is read-only.
# Get the current page layer
print page.closestPage
Note that you have to have pages within the page.content layer. You can also listen to the
Scroll event to get the page closest page while scrolling.

# Print the closest page while scrolling

page.on Events.Scroll, ->
print page.closestPage
page.nextPage(direction <string> ,
currentPage <layer> )
PageComponent 84
Framer JS
Get the next page. Takes two arguments: direction and the currentPage. By default, the
direction is set to "right" and the currentPage will be the first page.

width: Screen.width
pageOne = new Layer

width: page.width
height: page.height
pageTwo = new Layer

width: page.width
height: page.height
print page.nextPage()
We can also set the currentPage to any other page. For instance, we can look which layer is
at the left of the second page.
# Get the page to the left of pageTwo

print page.nextPage("left", pageTwo)
# Returns pageOne
page.previousPage
Get the previous page. Effectively the same as getting the page on the left using
page.nextPage("left") . This property is read-only.
# Get the previous page

print page.previousPage
page.snapToPage(page <layer> , animate

<boolean> , animationOptions)
PageComponent 85
Framer JS
Snap to a specific page. Takes three arguments: a page.content layer, animate (true or
false) and animation options. By default, animate is set to true and the animationCurve use a
spring curve.

width: Screen.width
pageOne = new Layer

width: page.width
height: page.height
pageTwo = new Layer

width: page.width
height: page.height
# Automatically scroll to pageTwo

page.snapToPage( pageTwo)
In the example above, we can customize the scrolling animation by defining custom
animationOptions as well.
# Define a slower easing curve

page.snapToPage(
pageTwo
true
animationOptions = curve: "ease", time: 2
)
page.snapToNextPage(direction <string> ,
animate <boolean> , animationOptions)
Snap to a specific the next page. Takes three arguments: direction, animate ( true or
false ) and animation options. By default, the direction is set to "right" and animate is
true .
PageComponent 86
Framer JS

width: Screen.width
pageOne = new Layer

width: page.width
height: page.height
pageTwo = new Layer

width: page.width
height: page.height
# Automatically scroll to pageTwo

page.snapToNextPage()
This allows you to snap to pages in any direction. For example, we can start on the first
page by snapping to it without animating, and then animate back to the first page.
# Start at page two by default

page.snapToPage(pageTwo, false)
# Scroll back to the page at its left, which is pageOne

page.snapToNextPage("left", true)
page.snapToPreviousPage()
Snaps to the previous page. It keeps track of all previously visited pages, included the
direction.
# Snap to the previous page

page.snapToPreviousPage()
page.addPage(page <layer> , direction

<string> )
PageComponent 87
Framer JS
Add a new page to the page.content layer of the PageComponent. It takes two arguments: a
layer (page) and a direction ( "right" or "bottom" ).

width: Screen.width
# The first page, placed directly within the page.content

pageOne = new Layer
width: page.width
height: page.height
# Second page
pageTwo = new Layer
width: page.width
height: page.height
# Third page
pageThree = new Layer
width: page.width
height: page.height
backgroundColor: "#CAECFF"
# Add the second and third page to the right

page.addPage(pageThree, "right")
If you're looking to add pages to the left, you can initially add them to the right, and instantly
switch to a different page, using snapToPage().
PageComponent 88
Framer JS

width: Screen.width
pageOne = new Layer

width: page.width
height: page.height
pageTwo = new Layer

width: page.width
height: page.height
# Add a page to the right

# Start at the second page by default

page.snapToPage(pageTwo, false)
page.horizontalPageIndex(page layer)
Get the index for a page component with horizontal pages. This is a number between 0 and
the number of pages minus 1.

width: Screen.width
pageA = new Layer

size: page.size
pageB = new Layer

size: page.size
page.addPage(pageA, "right")
page.addPage(pageB, "right")
print page.horizontalPageIndex(pageA)
# Prints: 0
print page.horizontalPageIndex(pageB)
# Prints: 1
page.verticalPageIndex(page <layer> )
PageComponent 89
Framer JS
Get the index for a page component with vertical pages. This is a number between 0 and the
number of pages minus 1.

width: Screen.width
pageA = new Layer

size: page.size
pageB = new Layer

size: page.size
page.addPage(pageA, "bottom")
page.addPage(pageB, "bottom")
print page.verticalPageIndex(pageA)
# Prints: 0
print page.verticalPageIndex(pageB)
# Prints: 1
PageComponent 90
Framer JS
Pinchable
Pinchable layers can be scaled and rotated with two fingers. By default, both of these
properties are enabled. You can also define custom scale ranges, by defining minimum and
maximum values. To pinch layers within Framer Studio, hold the alt key while moving your
cursor.
layer.pinchable.enabled <boolean>
Enable pinching for the layer.
layerA = new Layer

layerA.pinchable.enabled = true
layer.pinchable.threshold <number>
The minimal distance between two pointers before the gesture is recognized. Set to 0 by
default.
layerA = new Layer

# Set the minimal distance to 10

layerA.pinchable.threshold = 10
layer.pinchable.centerOrigin <boolean>
Sets the transform origin of your pinchable layer to the center point between your fingers.
Set to true by default.
layerA = new Layer

# Always scale from the center of the layer

layerA.pinchable.centerOrigin = false
Pinchable 91
Framer JS
layer.pinchable.scale <boolean>
Enable or disable scaling on pinch. Set to true by default.
layerA = new Layer

# Disable scale on pinch

layerA.pinchable.scale = false
layer.pinchable.scaleIncrements <number>
Scale the pinchable layer incrementally.
layerA = new Layer

# Scale in increments of 0.5 (0.5, 1, 1.5, 2)

layerA.pinchable.scaleIncrements = 0.5
layer.pinchable.minScale <number>
Set the minimal scale value of the pinchable layer.
layerA = new Layer

# Set the minimal scale to 0.5

layerA.pinchable.minScale = 0.5
layer.pinchable.maxScale <number>
Set the maximal scale value of the pinchable layer.
layerA = new Layer

# Set the maximal scale to 2

layerA.pinchable.maxScale = 2
Pinchable 92
Framer JS
layer.pinchable.scaleFactor <number>
Set the scaling factor of the pinchable layer. Set to 1 by default.
layerA = new Layer

# Increase scaling speed by 2

layerA.pinchable.scaleFactor = 2
layer.pinchable.rotate <boolean>
Enable or disable rotation on pinch. Set to true by default.
layerA = new Layer

# Disable scale on pinch

layerA.pinchable.rotate = false
layer.pinchable.rotateIncrements <number>
Rotate the pinchable layer incrementally.
layerA = new Layer

# Scale in increments of 15 degrees

layerA.pinchable.rotateIncrements = 15
layer.pinchable.rotateFactor <number>
Set the rotation factor of the pinchable layer. Set to 1 by default.
layerA = new Layer

# Increase the rotation speed by 2

layerA.pinchable.rotateFactor = 2
Pinchable 93
Framer JS
Print
Print를 이용하면 런타임 시에 변수의 값을 확인할 수 있다. console.log와 비슷한 동작을 한다. 실
제 출력은 여러분의 프로토타입 내에서 직접 값을 확인할 수 있다. 자바스크립트에서 print()를 사
용하면 된다.
print "Hello"
# 출력: "Hello"
어떤 타입의 값이든 확인이 가능하다. 동시에 여러 값을 출력하는 것도 가능하다.
layerA = new Layer

x: 10
y: 20
# 단일 속성 값
print layerA.x
# 출력: 10
# 여러 변수값
print layerA.x, print layerA.y (뒤의 print는 없어야 함)
# 출력: 10, 20
Print 94
Framer JS
Screen
Screen 객체는 현재 장치의 화면에 대한 크기 정보를 포함하고 있다. 각 장치마다 화면 크기가 다
르므로 변할 수 있다.장치가 전체화면이면 Canvas의 크기와 같아진다.
Screen.width <number>
현재 장치 화면의 폭을 나타내는 속성값으로 읽기만 가능하다.
print Screen.width
# Output: 640
Screen.height <number>
현재 장치 화면의 높이을 나타내는 속성값으로 읽기만 가능하다.
print Screen.height
# Output: 1080
Screen.size <object>
현재 장치의 폭과 높이를 나타내는 속성값으로 읽기만 가능하다.
print Screen.size
# Output: { width:640, height: 1080 }
Screen 95
Framer JS
ScrollComponent
ScrollComponent는 컨텐츠를 스크롤하는데 사용한다. A ScrollComponent is used to scroll
content. It implements momentum and spring physics, allows for customization, and emits
different events.
The ScrollComponent is built with two layers. The ScrollComponent itself is a layer that
masks its content. It has a content layer that has draggable enabled and constraints
configured. It automatically manages the size of the content layer based on the total size of
the sub layers of the content layer.
# Create a new ScrollComponent

width: 100
height: 100
# Include a Layer
layerA = new Layer
superLayer: scroll.content
You can also wrap an existing layer within a ScrollComponent, using

ScrollComponent.wrap() . The ScrollComponent will insert itself in-between the content and
its super layer. This is useful when you've imported designs from Sketch or Photoshop and
want to make a layer scrollable. You can learn more about wrapping in the learn section.
layerA = new Layer

width: 300
height: 300
scroll = ScrollComponent.wrap(layerA)
Compatibility
Before the ScrollComponent, Framer relied on native browser scrolling with layer.scroll .
This is still supported, and allows you to experiment with native scrolling and trackpad
scrolling.
scroll.content <layer>
ScrollComponent 96
Framer JS
The layer to add content to. To add content, create a new Layer and set its superLayer to
the scroll.content layer. When the content doesn't fit the ScrollComponent it will be
clipped.

width: 100
height: 100
layerA = new Layer

image: "images/bg.png"
width: 100
height: 200
scroll.contentInset <object>
Inset for the content. This will give your content extra padding between the constraints and
the actual content layers.

width: 100
height: 100
layerA = new Layer

width: 100
height: 200
scroll.contentInset =
top: 20
right: 0
bottom: 20
left: 0
scroll.speedX <number>
Horizontal scrolling speed, number between 0 and 1 . Default value is 1 .
ScrollComponent 97
Framer JS
layerA = new Layer

scroll.speedX = 0.5
scroll.speedY <number>
Vertical scrolling speed, number between 0 and 1 . Default value is 1 .
layerA = new Layer

scroll.speedY = 0.5
scroll.scroll <boolean>
Enable or disable scrolling. Enabled by default. If you set this to false , it will set both
scrollVertical and scrollHorizontal to false.
layerA = new Layer

scroll.scroll = false
scroll.scrollHorizontal <boolean>
Enable or disable horizontal scrolling.
layerA = new Layer

scroll.scrollHorizontal = false
ScrollComponent 98
Framer JS
scroll.scrollVertical <boolean>
Enable or disable vertical scrolling.
layerA = new Layer

scroll.scrollVertical = false
scroll.scrollX <number>
Horizontal scroll location.
layerA = new Layer

scroll.scrollX = 250
scroll.scrollY <number>
Vertical scroll location.
layerA = new Layer

scroll.scrollY = 250
scroll.scrollPoint <object>
Define the scroll location with x and y properties.
ScrollComponent 99
Framer JS
layerA = new Layer

scroll.scrollPoint =
x: 0
y: 50
scroll.scrollFrame <object>
Visible scroll frame.
layerA = new Layer

scroll.scrollFrame =
x: 0
y: 250
width: 250
height: 250
scroll.velocity <number>
Current scroll speed and direction in pixels per second at this current time.
# On scroll, print the velocity

scroll.on Events.Scroll, ->
print scroll.velocity
scroll.direction <string>
Current scrolling direction. Returns "up" , "down" , "left" , or "right" . The scrolling
direction is the inverse of the direction of the drag action: when dragging downwards, you're
effectively scrolling upwards. This property is read-only.
ScrollComponent 100
Framer JS
# On scroll, print the direction

print scroll.direction
scroll.angle <number>
Current scrolling angle (in degrees). The scrolling angle is the inverse of the direction of the
drag action: when dragging downwards, you're effectively scrolling upwards. This property is
read-only.
# On scroll, print the angle

print scroll.angle
scroll.closestContentLayer(originX <number> ,
originY <number> )
Get the layer closest to the ScrollComponent, depending on the defined origin. The origin is
defined as numbers between 0 and 1 , where (0,0) is the top-left corner, (0.5, 0.5)
the center, and (1,1) the bottom-right corner.
The default values are (0,0) . This means that it calculates the distance from the top-left of
the ScrollComponent to the top-left of the content layers.
ScrollComponent 101
Framer JS
# Create content layers

layerA = new Layer
name: "layerA"
x: 0
y: 0
layerB = new Layer

name: "layerB"
x: 50
y: 50
# Get the Layer of which the center point is closest

# to the center point of the ScrollComponent
print scroll.closestContentLayer(0.5, 0.5)
scroll.closestContentLayerForScrollPoint( <obj
ect> , originX <number> , originY <number> )
Get the content layer closest to a specific point.
ScrollComponent 102
Framer JS

layerA = new Layer
name: "layerA"
x: 0
y: 0
layerB = new Layer

name: "layerB"
x: 50
y: 50
# Get the layer of which the top-left corner is closest to x: 50, y: 25

print scroll.closestContentLayerForScrollPoint(
x: 50
y: 25
)
# Returns layerB
You can adjust the origin values to define how the distance is calculated. The default values
are (0,0) . This means that it calculates the distance from the top-left of the
ScrollComponent to the top-left of the content layers.

layerA = new Layer
name: "layerA"
x: 0
y: 0
layerB = new Layer

name: "layerB"
x: 50
y: 50
# With the origins set to the center, layerA becomes the closest.
print scroll.closestContentLayerForScrollPoint({ x: 50, y: 25 }, 0.5, 0.5)
# Returns layerA
ScrollComponent 103
Framer JS
scroll.scrollToPoint(point <object> , animate

<boolean> , animationOptions <object> )
Scroll to a specific point, optionally animating. Takes three arguments: a point ( x and y ),
animate ( true or false ), and animation options.
# Scroll content to x: 300, y: 100

scroll.scrollToPoint(
x: 200, y: 100
true
curve: "ease"
)
# Scroll very slowly

scroll.scrollToPoint(
x: 200, y: 100
true
curve: "ease", time: 10
)
scroll.scrollToLayer(layer Layer <object> ,

originX <number> , originY <number> , animate
<boolean> , animationOptions <object> )
Scroll to a specific layer. Takes five arguments: a layer, originX, originY, animate ( true or
false ) and animation options. You can only scroll to layers that are subLayers of the
scroll.content layer.
ScrollComponent 104
Framer JS
# Create ScrollComponent
width: 500
height: 500
# Define Background
layerA = new Layer
x: 500
y: 1000
image: "bg.png"
# Scroll to this layer

scrollerA = new Layer
scroll.scrollToLayer(scrollerA)
The originX and originY arguments define the point within the layer that will be scrolled to.
The default values are 0,0 - which is the top-left corner.
scroll.scrollToLayer(
layerA
0.5, 0
true
time: 2
)
scroll.scrollToClosestLayer(originX <number> ,
originY <number> )
Scroll to the closest content layer, using the given origin. The default values are (0,0)
which is the top-left corner, (0.5, 0.5) the center, and (1,1) the bottom-right corner.
layerA = new Layer

x: 75
y: 75
# Scroll to the center of layerA

scroll.scrollToClosestLayer(0.5, 0.5)
ScrollComponent 105
Framer JS
scroll.mouseWheelEnabled <boolean>
Enable or disable scrolling with mousewheel. Disabled by default. When set to true, layers
can be scrolled both by dragging and with the mouse.

width: 100
height: 100
# Allow scrolling with mouse

scroll.mouseWheelEnabled = true
layerA = new Layer

width: 100
height: 200
scroll.wrap(layer <Layer object> )

Wraps a layer within a new ScrollComponent. This is useful to create scrollable layers out of
imported layers.
# Import files from Sketch

sketch = Framer.Importer.load "imported/Scrollable"
# Wrap the "content" layer group

scroll = ScrollComponent.wrap(sketch.content)
Now, scroll is the variable name of the ScrollComponent. This also automatically wraps
your layer within a ScrollContent layer, which you can select to adjust certain properties like
momentum, overdrag or bounce.
ScrollComponent 106
Framer JS
# Import files from Sketch

sketch = Framer.Importer.load "imported/Scrollable"
# Wrap the "content" layer group

scroll = ScrollComponent.wrap(sketch.content)
# Change scroll properties

scroll.scrollHorizontal = false
scroll.speedY = 0.5
# Change scroll.content properties

scroll.content.draggable.momentum = true
scroll.content.draggable.overdrag = false
scroll.content.draggable.bounce = false
scroll.updateContent()
Re-calculates and updates the size of the content and the dragging constraints. It also
accounts for the contentInset.
If you're looking to change the size of your content layers, you can call it to update the size
of your ScrollComponent accordingly.
# Update the contents of the ScrollComponent

scroll.updateContent()
scroll.copy()
Returns: ScrollComponent
Copies a ScrollComponent, including its content and properties.
layerA = new Layer

# Copy the ScrollComponent

scrollB = scroll.copy()
ScrollComponent 107
Framer JS
SliderComponent
The SliderComponent creates a fully customisable slider for you. With it, you can adjust any
numeric value or layer property. It consists of three layers: the slider itself, the fill and the
knob.
# Create a SliderComponent
slider = new SliderComponent
slider.center()
By default, the slider has a dark fill color, a light-gray backgroundColor and rounded corners
with borderRadius . The radius of the fill automatically matches with that of the slider, so you
only need to set it once.
# Customize the appearance

slider.backgroundColor = "#ddd"
slider.borderRadius = 4
slider.knob layer
The knob of the slider. By default, it's made circular using borderRadius and has a little bit
of a drop shadow applied to it.
slider.center()
# Customize the appearance

slider.knob.shadowY = 2
slider.knob.shadowBlur = 4
slider.knob.borderRadius = 6
The knob is a draggable layer, with momentum enabled.
# Disable momentum
slider.knob.draggable.momentum = false
slider.knobSize number
SliderComponent 108
Framer JS
The size of the knob. This automatically sets the width and height of the knob. The default
value is 30 .
slider.center()
# Change the size of the knob

slider.knobSize = 40
slider.fill layer
The fill of the slider. The width and height are automatically updated, based on the size of
the slider. By default, its backgroundColor is set to #333 .
slider.center()
# Set the fill color to blue

slider.fill.backgroundColor = "#28affa"
slider.min number
The mininum value of the slider. Set to 0 by default.
slider.center()
# Set the minimum value

slider.min = -1
slider.max number
The maximum value of the slider. Set to 1 by default.
SliderComponent 109
Framer JS
slider.center()
# Set the maximum value

slider.max = 2
slider.value number
The value of the slider. Set to 0.5 by default.
slider.center()
# Print the current value

print slider.value
You can listen to any value changes with the "change:value" event. This is useful for
retreiving the value or mapping it to another layer property, like changing the opacity of a
layer with the slider.
slider.on "change:value", ->

print this.value
slider.pointForValue(value number)
Takes a value and returns the corresponding point (x) within the slider. With a slider
ranging from 0 to 1, the pointForValue(0.5) will be the center of the slider. With a width of
200 , this will return 100 .
width: 200
slider.center()
# Print the point for a value of 0.5

print slider.pointForValue(0.5)
# Returns 100
slider.valueForPoint(value number)
SliderComponent 110
Framer JS
Takes a point and returns the corresponding value of the slider. With a width of 200 , the
valueForPoint(100) will be the center of the slider. With a slider ranging from 0 to 1, this will
return 0.5 .
width: 200
slider.center()
# Print the value for the point 100

print slider.valueForPoint(100)
# Returns 0.5
slider.animateToValue(value number,
animationOptions object)
Automatically animate to a specific value. Takes two arguments: the value and optionally
custom animationOptions.
slider.center()
# Animate to 1
slider.animateToValue(1)
# Animate with a custom curve

slider.animateToValue(1, { curve: "spring(400,40,0)"})
SliderComponent 111
Framer JS
States
States are sets of layer properties and values. You can add, remove or switch between
states. State switching can be done with or without an animation, and you can define
different animation options for individual states too.
layer.states.add(name <string> , state

<object> | states <object> )
Adds a layer state. Each layer state is a collection of layer properties and values. You can
add them one by one with a name and property object or all at once with an object
containing the layer names and properties. There is always a "default" state, containing the
property values that the layer was created with. 레이어 상태를 추가한다. 각 레이어의 상태는
레이어 속성과 값의 집합이다. 여러분은 이름과 속성 객체를 하나씩 추가할 수도 있고, 레이어의 이
름과 속성들을 포함하는 객체를 한번에 추가할 수도 있다.
이는 언제나 "default" 상태로, 생성된 레이어의 속성값을 포함한다.
layerA = new Layer
# Add a single state

layerA.states.add
stateA:
x: 500
opacity: 0.5
# Add a multiple states

layerA.states.add
stateA:
x: 500
opacity: 0.5
stateB:
x: 200
opacity: 1
layer.states.remove(name <string> )
Remove a layer state by name.
레이어 상태를 이름으로 찾아 삭제한다.
States 112
Framer JS
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
layerA.states.remove("stateA")
layer.states.switch(name <string> )
Switch to a new state. This will animate the layer to the new state. By default, it will use the
layer.states.animationOptions.
새로운 상태로 전환. 해당 레이어에 새로운 상태로 애니메이션 효과를 준다. 기본값으로
layer.states.animationOptions 를 사용한다.
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
layerA.states.switch("stateA")
layer.states.switchInstant(name <string> )
Switch to a new state without animating.
애니메이션 효과 없이 새로운 상태로 전환한다.
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
layerA.states.switchInstant("stateA")
layer.states.current <string>
States 113
Framer JS
The name of the current state.

현재 상태의 이름.
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
layerA.states.switchInstant("stateA")
print layerA.states.current
# 출력: stateA
layer.states.next(states <array> )
Switches to the next state. If we reach the end of the states we start at the beginning again.
You can provide an array of state names for the ordering. If you don't provide an array with
state names it will use the ordering by when a state got added.
레이어를 다음 상태로 전환한다. 만약 주어진 상태의 마지막까지 다다랐다면, 맨 처음부터 다시 상
태값을 실행한다. 여러분은 상태의 이름을 원하는 순서대로 array로 만들 수 있다. 만약 여러분이
array를 상태의 이름으로 제공하지 않으면, 상태값이 추가된 순서대로 실행된다.
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
stateB:
x: 200
opacity: 1
# Every time we call this we cycle through the states

layerA.states.next("stateA", "stateB")
layer.states.animationOptions <object>
Set the animation options for the state machine. By default, the global animation options will
be used.
state machine에 따라 애니메이션 옵션을 설정한다. 기본값으론 글로벌 애니메이션 옵션이 사용된
States 114
Framer JS
다.
layerA = new Layer
layerA.states.add
stateA:
x: 500
opacity: 0.5
stateB:
x: 200
opacity: 1
layerA.states.animationOptions =
layerA.states.switch("stateA")
These animation options will now be used for all state switches. To set different animation
options for individual states, you can include them directly within the switch statement.
이러한 애니메이션 옵션은 모든 상태를 변경하는데 사용된다. 각각의 상태들을 다른 애니메이션 옵
션으로 설정하고자 한다면, 상태들에 변경할 상태값을 직접 포함시킬 수 있다.
# Switch to stateB with a spring curve

# stateB를 spring curve로 변경
layerA.states.switch("stateB", curve: "spring(400, 30, 0)")
# Switch to stateB with an easing curve

# stateB를 easing curve로 변경
layerA.states.switch("stateB", time: 1, curve: "ease")
States 115
Framer JS
Utilities
Utilities are custom functions in Framer, designed to make things easier to do. For example,
they allow you to map values, set delays and intervals, detect devices and more. See below
for a complete overview.
Utilities는 Framer의 커스텀 함수로 만드는 작업을 쉽게 하도록 디자인되었다. 예를 들어, 값 맵핑,
딜레이와 주기 설정, 디바이스 인지하는 것들을 허용한다. 아래 자세한 설명을 보기 바란다.
Utils.modulate(value <number> , a <array> , b

<array> , limit <boolean> )
Translates a number between two ranges. The easiest way to think about is to convert from
miles to kilometers or kelvin to celsius. When you enable limit, it will never return a value
outside of the b range. The default value for limit is false.
두 범위 안의 숫자를 변환한다. miles를 kilometers로 혹은 kelvin을 celsius로 바꾸는 가장 쉬운 방
법을 생각한다. 여러분이 한계치를 정한다면, b 범위 밖으로 나간 값은 절대 반환하지 않는다. 한
계치의 기본값은 false 이다.
Arguments
'value' — A variable, representing the input.
'[a, a] — The first range of two numbers.
'[b, b]' — The second range of two numbers.
'limit' — A boolean, set to false by default. (Optional)
print Utils.modulate(0.5, [0, 1], [0, 100])

# Output: 50
print Utils.modulate(1, [0, 1], [0, 100])

# Output: 100
You can think of modulate as a way to convert numbers between different scales. Like going
from Celcius to Farenheit, or Kilometers to Miles.
# Convert to Celsius/Farenheit
Utils.modulate(celcius, [0, 100], [32, 212])
Utilities 116
Framer JS
It's also useful for creating parallax effects on scroll. For example, you can move a layer
from 0-10 , when scrolling from 0-100 .

scrollHorizontal: false
layerA = new Layer

x: 100
# Modulate the scrolling distance

scroll.on Events.Move, ->
y = Utils.modulate(scroll.scrollY, [0,100], [0,10])
layerA.y = y
Utils.cycle(values <array> )
Creates a function that returns the next value in a given array every time you call it.
여러분이 호출할 때마다 주어진 배열 안의 그 다음 값을 반환하는 함수를 생성한다.
Arguments
values — An array of values.
cycler = Utils.cycle(["a", "b", "c"])
print cycler() # Output: "a"

print cycler() # Output: "b"
print cycler() # Output: "c"
print cycler() # Output: "a", returns to start
Utils.labelLayer(layer <Layer object> , text

<string> )
Quickly add a label to a layer. It will be text set in Menlo in the center.
레이어에 빠르게 라벨을 추가한다. 이는 텍스트를 중앙에 배열한다.
Arguments
layer — A layer object.
text — A string.
Utilities 117
Framer JS
layerA = new Layer
# Add a label to layerA

Utils.labelLayer(layerA, "Hello")
Utils.round(value <number> , decimals

<number> )
Rounds a number.
주어진 숫자 자릿수로 소수점 아래를 반올림한다.
Arguments
value — A floating point number.
decimals — The amount to appear after the decimal point. (Optional)
print Utils.round(100.12345, 0) # Output 100

print Utils.round(100.12345, 2) # Output 100.12
print Utils.round(100.12345, 4) # Output 100.1234
Utils.randomChoice(values <array> )
Select a random item in an array of values.
배열 안의 값 중 랜덤으로 아이템을 선택한다.
Arguments
values — An array of values.
print Utils.randomChoice(["a", "b", "c"]) # Output: "c"

print Utils.randomChoice(["a", "b", "c"]) # Output: "b"
print Utils.randomChoice(["a", "b", "c"]) # Output: "a"
Utils.randomColor(opacity <number> )
Utilities 118
Framer JS
Creates a random color with a given opacity. The opacity is optional.

주어진 불투명값으로 랜덤 컬러를 생성한다. 불투명값은 옵션이다.
Arguments
opacity — A number between 0 and 1. (Optional)
layerA = new Layer

layerA.backgroundColor = Utils.randomColor(0.5)
print layerA.backgroundColor
# Output: "rgba(124, 12, 33, 0.5)"
# 출력 : "rgba(124, 12, 33, 0.5)"
Utils.randomNumber(a <number> , b <number> )

Generate a random number between a and c
a와 c 사이의 랜덤 숫자를 생성한다.
Arguments
a — A number, the first value of the range.
b — A number, the final value of the range.
print Utils.randomNumber(0, 1) # 출력: 0.2

print Utils.randomNumber(0, 100) # 출력: 22
Utils.delay(delay <number> , handler

<function> )
Calls a funtion after a delay. Delay is defined in seconds.

주어진 딜레이값 이후에 함수를 호출한다. 딜레이 값은 초로 정의된다.
Arguments
delay — A number, representing seconds.
handler — A function.
Utilities 119
Framer JS
Utils.delay 0.5, ->

print "hello"
# Output: "hello", after 0.5 seconds

# 출력: "hello", 0.5초 이후에
Utils.interval(interval <number> , handler

<function> )
Calls a function every x seconds.

x 초 마다 함수를 호출한다.
Utils.interval 2, ->
print "hello"
# 출력: "hello"
# 출력: "hello"
# 출력: "hello"
# 출력: "hello" 반복...
Utils.debounce(interval <number> , handler

<function> )
Creates a function that will delay the calling of handler until after x seconds have elapsed
since the last time it was invoked. Alias to _.debounce.
Arguments
interval — A number, representing seconds.
handler — A function.
handler = Utils.debounce 0.1, ->

print "hello"
for i in [1..100]
handler()
# 출력: "hello" only once
Utilities 120
Framer JS
Utils.throttle(interval <number> , handler

<function> )
Creates a function that will call the wrapped function at most once per x seconds. Alias to
_.throttle.
Arguments
interval — A number, representing seconds. handler — A function.
handler = Utils.throttle 0.1, ->

print "hello"
for i in [1..100]
handler()
# 출력: "hello" only once
Utils.isWebKit()
Returns: boolean
이 것이 WebKit 브라우저인지 반환한다.
print Utils.isWebKit() # Output true
Utils.isChrome()
Returns: boolean
이 것이 Chrome 브라우저인지 반환한다.
print Utils.isChrome() # Output true
Utils.isSafari()
Returns: boolean
이 것이 Safari 브라우저인지 반환한다.
Utilities 121
Framer JS
print Utils.isSafari() # Output true
Utils.isTouch()
Returns: boolean
이 것이 터치가 되는 브라우저인지 반환한다.
print Utils.isTouch() # Output true
Utils.isDesktop()
Returns: boolean
이 것이 데스크탑 브라우저인지 반환한다.
print Utils.isDesktop() # Output true
Utils.isPhone()
Returns: boolean
이 것이 폰 장치인지 반환한다.
print Utils.isPhone() # Output true
Utils.isTablet()
Returns: boolean
이 것이 타블렛 장치인지 반환한다.
print Utils.isTablet() # Output true
Utils.isMobile()
Utilities 122
Framer JS
Returns: boolean
이 것이 모바일 장치인지 반환한다.
print Utils.isMobile() # Output true
Utilities 123
Framer JS
VideoLayer
video layer는 비디오를 로딩하며 layer.player 객체를 가지고 비디오를 제어한다.
브라우저는 다양한 타입의 비디오를 지원한다. 여기에는 alpha channel을 지원하는 Animation
codec도 포한된다. 비디오 동작에 관련된 보다 자세한 내용은 여기를 참조한다.
videolayer.video <string>
video layer에 video url을 설정한다.
# Set on creation
layerA = new VideoLayer
video: "hello.mp4"
# Change afterwards
layerA.video = "bye.mp4"
videolayer.player <string>
Player 객체는 여러분이 비디오를 제어하고 다시재생 이벤트를 감지하는데 사용한다.
관련된 내용은 여기를 참조한다. 이벤트에 대해서는 여기를 참조하자.
# Set on creation
layerA = new VideoLayer
video: "hello.mp4"
# Enable auto play

layerA.player.autoplay = true
# Play the video

layerA.player.play()
# Jump to 5 seconds
layerA.player.fastSeek(5)
# Listen to paused playback

Events.wrap(layerA.player).on "pause", ->
print "Video paused"
VideoLayer 124

Framer Js

Uploaded by

Copyright:

Available Formats

Framer Js

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Framer Js

Uploaded by

Copyright:

Available Formats

Framer

Framer JS, Prototype anything you can

애니메이션은 커브에서 시작과 끝을 가진다. 시작값은 애니메이션이 시작 순간에 결정되고 끝값은

Options Value Description

The duration in seconds. Ignored for spring values. Default

Animation Curve Types

spring-dho Damping harmonic oscillator spring. Sloppy spring physics.

Animation Curve Options

Curve Types Type Description

Minimal movement threshold before we say the spring

layerA = new Layer

# Animate the layer to the right

# Animate multiple properties

# Animate the layer to the right in 5 seconds

# Repeat an animation 5 times

# Start an animation after 5 seconds

# Animate the layer with a spring curve

# Animate the layer with a bezier curve

layerA = new Layer

animationA = new Animation

# Nothing will move until we start

layerA = new Layer

animationA = new Animation

# Stop the animation

Returns: Animation Object

layerA = new Layer

animationA = new Animation

# Alternate between the two animations

layerA = new BackgroundLayer

# Hex value for white

# RGB value for white

# RGBA value for white

# Multiple ways to define the same color:

# Define a color with a HEX string

# Define a color with an RGB object

# Define a color with an HSL object

# Create a new color, lighten it

layerA = new Layer

# Create a new color, darken it

layerA = new Layer

# Create a new Color, saturate it

layerA = new Layer

# Create a new Color, desaturate it

layerA = new Layer

# Create a new Color

layerA = new Layer

Color.mix( colorA, colorB, fraction, limit,

from 0 to 1. (Optional) limit — A boolean, set to false by default. (Optional) model — A

# Mix red with yellow

# Create new Layer

# On move, transition its color to yellow

# Map the dragging distance to a number between 0 and 1

# Mix the colors, enable the limit, transition in HUSL

print Color.isColor(new Color "red") # true

print Color.isColor(new Color "red") # true

print Color.isColorString("red") # true

blue = new Color("blue")

blue = new Color("blue")