Framer Examples

gistfile1.md

Creating a layer

layer = new Layer
  width: 100
  height: 100

Animating a layer

layer.animate
		properties:
			width: 300
			height: 100
		curve: "spring(200,20,0)"

Changing the properties of a layer

layer.properties =
	width: 20
	height: 10

Adding interaction

rectangle.on Events.Click, ->
	# What you want to happen when clicked
	this.animate
		properties:
			x: 200
			width: 300
			height: 100
		curve: "spring(200,20,0)"

Or perhaps you want the something to happen to a different layer

rectangle.on Events.Click, ->
	# What you want to happen when clicked
	square.animate
		properties:
			y: -100
			x: 20
 			width: 400
			height: 500
		curve: "spring(200,20,0)"

Animate a layer on hover

rectangle.on Events.MouseOver, ->
	this.animate
		properties:
			scale: 1.2
		curve: "spring(200,20,0)"

Now return it to it's original state when the mouse leaves the layer

rectangle.on Events.MouseOut, ->
	this.animate
		properties:
			scale: 1
		curve: "spring(200,20,0)"

Creating a new layer and making it a child (sub layer) of another layer

childLayer = new Layer
  width: 100
  height: 100
  superLayer: parentLayer