Skip to content
Browse files

Merge pull request #483 from krijnrijshouwer/patch-1

Readme Refresh
  • Loading branch information
koenbok committed Mar 30, 2017
2 parents a4c59b4 + 2d0ca90 commit c80ec3b6d9d8a514571d67ce686c4193a16efe0d
Showing with 48 additions and 70 deletions.
  1. +48 −70
@@ -1,97 +1,75 @@
[![wercker status]( "wercker status")](

# Framer.js
# Framer Library

**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 Library is an open source JavaScript framework for high fidelity prototyping. Use it to design animations and interactions without any limitations. Make use of real spring physics or animate with 3D effects, anything is possible.
<br /><br />

[Framer]( is a prototyping app for Mac, based on Framer.js. Framer Studio includes an editor based on CoffeeScript, instant visual feedback and much more.
<br /><br />

[Join the group]( at Facebook for help, ideas and general prototyping talk. Also feel free to post your work.
There are 2 ways to use Framer Library. To get most out of Library download Framer; a design tool for the Mac. The other way you can leverage Framer Library is with generator; an app that imports your layers from Sketch, Photoshop and Figma. The following features are included with each option.
<br /><br />

## Get Started
<br /><br />

## Framer

Framer is a design tool for the Mac which allows you to design without limitations. It is based on Framer Library and offers the familiarity of visual editing with the flexibility of code. A seamless workflow, further complemented by device previewing, version control and easy sharing.

[Find out more](
<br /><br />

- [Download] ( (Framer.js & Framer Generator)
![Framer for Mac](
<br /><br />

## Set up Framer Library

- [Download]( (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)

![Folder Screenshot](

## Example
###### Define a layer and center it
imageLayer = new Layer({width:128, height:128, image:"images/icon.png"})
###### 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) {
#### 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)
![Project Folder](
<br /><br />

## Get Started

<img src="" width="49px">

## Contribute
[Learn with our beginner guides]( that give you a basic overview of Framer Library and a few simple pointers on how to set yourself up for success.
<br /><br />

Check the [wanted features wiki page]( for ideas to work on.
<img src="" width="64px">

##### Building
[Become part of the community]( and join the Facebook Group or engage with members in your city. Over 19.000 designers, engineers and creators are waiting to meet you.

- Download or clone the code
- Make sure you have node and npm >= 2 installed
<br /><br />

## Contribute

###### Building

- Download or fork the repository
- Make sure you have the latest version of node and npm installed
- Run `make dist` to build the latest version
- Run `make` to rebuild the latest version on changes

##### Testing
###### 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
###### Reporting Issues

- Please use the issue tracker
- Try to include an example and clearly describe expected behaviour
<br /><br />

## Others

## More

- [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 (like the devices) run `make resources` and commit. The result will automatically get deployed.
- [Twitter]( — Follow us for updates & the latest work
- [The Community]( — Join over 19.000 designers for help and advice
- [The Newsletter]( — Get the best work & latest news in your inbox
- [Featured Examples]( — The best Framer work from the community
- [Latest builds]( — The latest builds of Framer.js

0 comments on commit c80ec3b

Please sign in to comment.
You can’t perform that action at this time.