Framer

Installation

To get started, download Framer and unzip it.

Open index.html to view the default prototype and you'll see the logo bounce on a click. To add interactions and animations, start editing app.js (in your code-editor). Try it by adding a state to the imageLayer:

fifth: { y:200, scale:0.8, rotationZ:200, blur:2 }

The imageLayer will now move up, scale, rotate and blur on the fourth click. You've just added some interaction! Note: Framer runs best in WebKit, so please use Safari. Chrome works too, but has been rocky since they switched to Blink.

JavaScript

If you don't know JavaScript or are just beginning, don't worry. There are many great resources to get started. JavaScript is worth learning on its own, as you can do web, application, and back-end development with it.
See Code Academy and Mozilla's Dev Center to get started.

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.

• By default your layers are imported under a myLayers object
• Access any layer by its group name: myLayers.GroupName.
• Groups within groups will become subLayers.
• Groups with vector masks will become layers with clip enabled.
• Group names should be unique. If they're not, Framer will rename them.