Skip to content

Instantly share code, notes, and snippets.

View nicebarbarian's full-sized avatar

nicebarbarian

View GitHub Profile
@nicebarbarian
nicebarbarian / spring-collection
Created October 15, 2014 15:45
framer.js: spring collection
exessiveSpring = "spring(200, 15, -3)"
gentleSpring = "spring(40, 5, 0)"
swingSpring = "spring(120, 15, 0)"
smoothSpring = "spring(100, 20, 0)"
superSlowSpring = "spring(30, 20, 0)"
slowSpring = "spring(100, 15, -3)"
snapSpring = "spring(200, 20, 0)"
tightSpring = "spring(300, 25, 0)"
straightSpring = "spring(500, 40, 0)"
@nicebarbarian
nicebarbarian / layer-animation
Created October 12, 2014 17:48
framer.js: layer animation
myLayer.animate
properties:
opacity: 0.5
curve: "ease"
repeat: 1
delay: 2
time: 1
@nicebarbarian
nicebarbarian / collection-grid
Created October 12, 2014 14:06
framer.js: collection grid
rows = 3
cols = 3
gutter = 16
width = 96
height = 96
for rowIndex in [0..rows-1]
for colIndex in [0..cols-1]
@nicebarbarian
nicebarbarian / collection-list
Created October 12, 2014 14:03
framer.js: collection list
rows = 10
gutter = 8
width = 300
height = 30
for rowIndex in [0..rows-1]
cellLayer = new Layer
width: width
@nicebarbarian
nicebarbarian / layer-positioned-in-center
Created October 12, 2014 14:02
framer.js: layered positioned in center
centeredLayer = new Layer
width: 200
height: 200
centeredLayer.center()
# Center it again on resizing the screen
window.onresize = -> centeredLayer.center()
@nicebarbarian
nicebarbarian / layer-with-click-animation
Created October 12, 2014 14:01
framer.js: layer with click animation
myLayer = new Layer
x: 0
y: 100
width: 50
height: 50
myLayer.on Events.Click, ->
myLayer.animate
properties: {x:200}
curve: "spring(400,10,0)"
@nicebarbarian
nicebarbarian / layer-with-dragging
Created October 12, 2014 13:59
framer.js: layer with dragging
myLayer = new Layer
x: 0
y: 100
width: 100
height: 100
myLayer.draggable.enabled = true
@nicebarbarian
nicebarbarian / layer-with-image
Created October 12, 2014 13:57
framer.js: layer with image
myImageLayer = new Layer
x: 100
y: 100
width: 200
height: 200
myImageLayer.image = "http://goo.gl/gpEHNR"
@nicebarbarian
nicebarbarian / layer-with-scroll
Last active August 29, 2015 14:07
framer.js: layer with scrolling
scrollingLayer = new Layer
width: 200
height: 400
contentLayer = new Layer
width: 200
height: 400 * 3
image: "http://goo.gl/gpEHNR"
superLayer: scrollingLayer
@nicebarbarian
nicebarbarian / layer-with-states
Last active August 29, 2015 14:07
framer.js: layer with states
myLayer = new Layer
x: 0
y: 100
width: 50
height: 50
myLayer.states.add
one: {x: 100}
two: {x: 200}