Permalink
Browse files

Readme.md refresh

Framer.js & Framer Generator
  • Loading branch information...
Benjamin den Boer
Benjamin den Boer committed Sep 18, 2014
1 parent 06a4df9 commit cc66c7b3f347469c54ca92c5b3c93483d7ae38d5
Showing with 71 additions and 81 deletions.
  1. +71 −81 readme.md
152 readme.md
@@ -1,96 +1,86 @@
## Framer Prototyping
For a complete overview, downloads and docs please visit [framerjs.com](http://www.framerjs.com). Find the latest builds at [builds.framerjs.com](http://builds.framerjs.com)
#### Building
# 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](http://framerjs.com) is a prototyping app for Mac, based on Framer.js. Framer Studio includes an editor based on CoffeeScript, instant visual feedback and much more.
## Get Started
- [Download] (http://framerjs.com/static/downloads/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)
![Folder Screenshot](http://f.cl.ly/items/0P2m0f0v1X2U2E0J0I2i/ss2.png)
## Example
###### Define a layer and center it
```
imageLayer = new Layer({width:128, height:128, image:"images/icon.png"})
imageLayer.center()
```
###### Add states
```
imageLayer.states.add({
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.states.animationOptions = {
curve: "spring(500,12,0)"
}
```
###### Toggle states on click
```
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
```
#### 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 Generator.app
- 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.
- 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
##### Building
- Download or clone the code
- Run `npm install` to get the dependencies
- Run `make build` to build the latest version
#### Testing
##### Testing
- Run `make test` to run the unit tests in phantomjs
- Run `make safari` to run the tests in Safari
- Download Cactus and open extras/CactusFramer, then go to /test.html for a list of visual tests.
#### Reporting Issues
##### Reporting Issues
- Please use the issue tracker and tag them with Framer3
- Try to include an example and clearly describe expected behaviour
[![wercker status](https://app.wercker.com/status/8e5d02248bfd387acebdf177fba5f6b1/m "wercker status")](https://app.wercker.com/project/bykey/8e5d02248bfd387acebdf177fba5f6b1)
## Framer 3 Changes
Framer 3 is close to a rewrite. Or maybe more a huge refactor. The new code base is simpler and very well tested, so I hope others can start contributing more easily.
#### New Features
- State machine
- A proper way to organize animations
- Define a set of states with myLayer.states.add "name", {properties...}
- Transform to a specific state with myLayer.states.switch "name" or myLayer.states.next()
- Optionally override layer.states.animationOptions, or pass them in
- Animation backend
- Based on requestAnimationFrame
- Allows for more precise animation handling and better control
- Allows to change animations in-flight, which is required for real physics
- Animations now take a new argument curveOptions that can contain named inputs (like spring, tension, velocity) rather than the old curve "spring(x,y,z)" argument.
- Animators
- Added damping harmonic oscillator spring physics (curve: "spring-dho")
- Very simple infrastructure to add your own animators:
- Emit a number on a tick
- Check if the animation has reached its end
- Support for future advanced animators like real physics and path animators
#### Big Changes
- Views are now called Layers (superLayer, subLayers, etc)
- Layers get a default background color and width, height on default so you can see them
- You can override the defaults yourself like Framer.Defaults.Layer.width = 100
- Layer events (myLayer.on) have a modified scope where this is the layer it's being called on
- There is no ScrollLayer, it's just a Layer. You can enable scrolling with scroll, scrollX, scrollY (and animate them).
- There is no ImageLayer, it's just a Layer. Set the image with myLayer.image = "url"
#### Smaller Changes
- More sane error checking all around, throwing sensible errors if you do something wrong
- Transform origin are now full properties: Layer.originX, Layer.originY
- Most objects have a nice .toString() method for debugging
- Added delay and repeat keywords to animation
- Animation events now also get emitted on the layer (start, stop, end)
- Replaces the Underscore library with Lodash and added Underscore.String
- Some css properties are now directly exposed on the layer (without having to go through .style) like backgroundColor
- Added Utils.mapRange to map from one number range to another. So 0.5 as input from 0-1 to 0-50 becomes 25.
#### Big bugs fixed
- A lot of stuff around animations
- Reliable event handling (start, stop, end)
- Multiple animations for one layer
- Rotation issues beyond 360 degrees
- Rewritten the Photoshop importer with tests
#### Backwards Compatibility
- View, ScrollView and ImageView should work, but they give a warning.
- Animation spring initial velocity behaves a bit different
#### Known Issues
- Rotation issues with a low z-index cause drawing issues.
- Animation perf in some versions of Chrome seems less good than Framer 2 (maybe fixed)
- The blur (and likely other filter properties) are kind of broken on Chrome
#### Plans
- Add back in the css keyframe animation backend and allow to switch between them on a per animation basis.
- Add more animatable properties. You can set layer.style as an animation target and animate its numeric css properties. - We'll have to put some converters in to tween between colors, gradients, shadows, etc.
- Add back in the box2d physics engine and come up with a testable api
- Research FF/IE support
#### Framer 3 Release Todo
- Add a Framer.Future namespace to try new stuff
## More
- [Framer Studio](http://framerjs.com) Prototyping application for OS X, built on Framer.
- [Latest Builds](http://builds.framerjs.com)
[![wercker status](https://app.wercker.com/status/8e5d02248bfd387acebdf177fba5f6b1/m "wercker status")](https://app.wercker.com/project/bykey/8e5d02248bfd387acebdf177fba5f6b1)

0 comments on commit cc66c7b

Please sign in to comment.