Framer.js

Framer.js is an open source JavaScript framework for rapid prototyping. Framer.js allows you to define animations and interactions, complete with filters, spring physics, 3D effects and more. It's bundled with Framer Generator, an application that allows you to import layers directly out of Photoshop and Sketch.

Framer Studio is a prototyping app for Mac, based on Framer.js. Framer Studio includes an editor based on CoffeeScript, instant visual feedback and much more.

Join the group at Facebook for help, ideas and general prototyping talk. Also feel free to post your work.

Get Started

[Download] (https://builds.framerjs.com/latest/Framer.zip) (Framer.js & Framer Generator)
Open index.html in a WebKit browser and you'll see an image animate on click
Edit the app.js to add interactions and animations (see example code below)

Example

Define a layer and center it

imageLayer = new Layer({width:128, height:128, image:"images/icon.png"})
imageLayer.center()

Add states

imageLayer.states = {
	second: {y:100, scale:0.6, rotationZ:100},
	third:  {y:300, scale:1.3},
	fourth:	{y:200, scale:0.9, rotationZ:200}
}

Set default animation options

imageLayer.animationOptions = {
	curve: "spring(500,12,0)"
}

Toggle states on click

imageLayer.onClick(function(event) {
	imageLayer.stateCycle()
})

Features

Spring Physics, Easing Functions and Bezier Curves
Hardware Accelerated (3D) Animations with 60fps
Events: Click, Touch, Drag, Scroll and more
State Machine to define and animate between sets of properties
Import from Sketch & Photoshop with Framer Generator
Based on WebKit: works on desktop, mobile and tablets
Debugging with Web Inspector and JavaScript console

Framer Generator

With a Sketch or Photoshop file open, open Framer Generator and click Import. Only layer groups are imported; single layers are ignored. The hierarchy of your layer groups is respected.

You can safely move things around in Sketch or Photoshop and re-import. Generator will update the images and any changes in hierarchy, but leave your code intact. See our documentation for more.

Access any layer by its group name
Groups within groups will become subLayers
Groups with vector masks will become clipped layers
Group names should be unique (otherwise, they'll be renamed)

Contribute

Check the wanted features wiki page for ideas to work on.

Building

Download or clone the code
Make sure you have node and npm >= 2 installed
Run make dist to build the latest version
Run make to rebuild the latest version on changes

Testing

Run make test to run the unit tests in phantomjs
Run make to retest the latest version on changes

There are also a set of visual and interactive tests for Framer Studio which you can find in test/studio.

Reporting Issues

Please use the issue tracker
Try to include an example and clearly describe expected behaviour

Framer Studio - Prototyping application for OS X, built on Framer
Latest Builds - Latest builds of Framer.js
Framer 3 Changes - What's new in Framer 3

To add or update the resources for http://resources.framerjs.com (like the devices) run make resources and commit. The result will automatically get deployed.

jimoong/Framer