Skip to content
Browse files

Framer 3

  • Loading branch information
koenbok committed May 13, 2014
2 parents c16f69f + ec84535 commit 2bbd10a5d5b34ad810deeffe89e833cbe3133fd1
Showing with 96 additions and 0 deletions.
  1. +96 −0
@@ -0,0 +1,96 @@
## Framer Prototyping

For a complete overview, downloads and docs please visit []( Find the latest builds at [](

#### Building

- Download or clone the code
- Run `npm install` to get the dependencies
- Run `make build` to build the latest version

#### 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

- Please use the issue tracker and tag them with Framer3
- Try to include an example and clearly describe expected behaviour

[![wercker status]( "wercker status")](

## 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
- 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 it's 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 as an animation target and animate it's 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

0 comments on commit 2bbd10a

Please sign in to comment.