Framer.js tips

Extending Framer to make prototyping faster and more fun

Published in

Framer JS

3 min readSep 26, 2013

Update: I ended up turning all these tips into a library you can instantly include in your projects. Check out Shortcuts for Framer!

My favorite part about the Framer.js prototyping framework is being able to easily extend and tweak it to fit my workflow. In the couple weeks I’ve been using Framer, I’ve ended up writing some code that I reuse, which I wanted to share.

Make views global variables for easy access

If you use the Photoshop or Sketch exporter to easily bootstrap a prototype, you’ll end up with a PSD object that includes all your views. Since we’re working with a prototype, we can define each view in the global scope to easily access and manipulate them.

for (var layerGroupName in PSD) {
 window[layerGroupName] = PSD[layerGroupName];
}

If you run this in the beginning of app.js, you’ll be able to access each group with a simple variable name. This gets handy in a long file.

Before: PSD["View1"].animate ...
After: View1.animate ...

NB: Javascript has special rules about variable names (there are protected names and they can’t start with numbers), so pay attention to those while naming your layers.

Store original position

I often end up needing to transition a view between an initial state and a final state. It helps to store all the information about a View when you load the app, so that you can easily revert back to it.

for (var layerGroupName in PSD) {
 PSD[layerGroupName].originalFrame = window[layerGroupName].frame;
}

This way I can do

layer.x = 200;
// later…
layer.x = layer.originalFrame.x;

Even better, put the transitioned state as an attribute of the View too, so you can reuse it around your code.

layer.finalFrame = layer.originalFrame;
layer.finalFrame.x = 200;
…
layer.x = layer.finalFrame.x;
layer.x = layer.originalFrame.x;

Shorter default animation syntax

Framer’s animation syntax requires you to specify a duration and an easing function each time. I usually don’t change these values, and when animating a lot of objects they clutter the code. We can easily add a new function to the View prototype to animate with default values.

View.prototype.animateDefault = function(props) {
 this.animate({ time: 200, curve: 'spring(400,30,200)', properties: props });
}

This way, each time I animate, I can write much shorter code:

 // Before
 Posts.animate({
  time: 200,
  curve: 'spring(400,30,200)',
  properties: {
   opacity: 0,
   x: 100
  }
 }) // After
 Posts.animateDefault({ opacity: 0, x: 100 })

Reusable animation functions

If you end up needing to run a series of animations multiple times, just turn them into a function and call the function instead.

// Before
Heart1.on("click", function() {
 Heart.animateDefault({x: 100})
 Skip.animateDefault({scale: 0.1})
 Container.animateDefault({opacity: 0})
});Heart2.on("click", function() {
 Heart.animateDefault({x: 100})
 Skip.animateDefault({scale: 0.1})
 Container.animateDefault({opacity: 0})
});// After
animateHeart = function() {
 Heart.animateDefault({x: 100})
 Skip.animateDefault({scale: 0.1})
 Container.animateDefault({opacity: 0})
}Heart1.on("click", animateHeart);
Heart2.on("click", animateHeart);

Collect your common shortcuts into a file

If you end up with code you want to use in your sketch files often, put all of them into a single JS file, and include it in index.html like:

 <body>
  <script src="framer/views.web_v2_feed_visual.js"></script>
  <script src="framer/framer.js"></script>
  <script src="framer/framerps.js"></script>
  <script src="common.js"></script>
  <script src="app.js"></script>
 </body>