A red pulse

Motion

Experiments with Framer.JS

I recently started playing around with Framer.JS, a JavaScript-based framework to build high definition mobile prototypes.

Framer lets you write CoffeeScript, which is easier on the eyes than vanilla JS, but still got quite the learning curve — you still have to know what you’re doing to pull out the crazy stuff.

Regardless, it’s really fun to play with. Here’s a list of ongoing experiments:

Pulsing Button

Pulse

Just a test to get used to the basic features of Framer

See the code on GitHub
iOS Notification on a light blue iPhone

iOS Notification

A small prototype that simulates drag behavior of an iOS Notification.

See the code on GitHub

Some resources to get started with Framer

Framer Basics

The official resource to get the basics of Framer. Make sure to read the advanced documentation and take a look at the examples as well!

Framer Facebook Group

Official Facebook group for Framer discussion. Really active and the development team is always around to answer questions and get feedback from the community.

The Little Book on CoffeeScript

The O’Reilly book for CoffeeScript. Free to read online!

CoffeeScript for FramerJS

A small book to introduce designers to CoffeeScript focused on prototyping with Framer.

Creating your first prototype with Framer

A great small tutorial to make your first Framer prototyping using assets exported from Sketch.