/Framer

A prototyping toolkit

Primary LanguageCoffeeScriptMIT LicenseMIT

Framer Prototyping

For a complete overview, downloads and docs please visit framerjs.com. Find the latest builds at builds.framerjs.com

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

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