Getting started with FramerJS

The new tools are mostly dedicated to people who want to be pioneers of new user experience patterns and cutting egde interactions.

With FramerJS at hand a team can work on complex mobile interactions and flows that would otherwise not be demonstrable at an early stage of the concept. Getting early feedback on prototyping from software developers and users helps everyone on the team have a clear view on the deliverables.

With this blog post I would like to give you a very brief intro into FramerJS.

Say hello to FramerJS

FramerJS consists of two parts: The Framer.js JavaScript framework, and Framer Studio, a Mac app based on Framer.js.

Framer.js allows you to define animations and interactions, spring physics, 3D effects, handling mobile and desktop based events.

Framer Studio is an app for Mac. Studio includes a code editor based on CoffeeScript. FS makes your workflow much easier with features like a live preview panel and Sketch or Photoshop importers, ability to share prototypes and more. Studio’s editor allows you to write your code in CoffeeScript instead of JavaScript. Because Framer’s target user base is designers, not developers, CoffeeScript offers a gentler learning curve for non-programmers and can be much faster to write, which is key when prototyping.

Let’s do a very simple prototype, that will animate images, and do certain actions after the user taps on a background.

Layers in FramerJS

Layers are basic building bricks in FramerJS. A layer´s position, size and looks are defined by its properties. Besides positioning, you can also transform, hide layers, scale layers and more. There are three basic types of layers:

BackgroundLayer
Layer
VideoLayer

You can also use some non-standard extended layers created by the community, like CameraLayer, the one to grab an camera output from your mobile phone. Layers can have a hierarchy. You can adjust the position of a particular layer in the hierarchy on the flight.

bg = new BackgroundLayer
	width: Screen.width
	height: Screen.height
	backgroundColor: 'black'

earth = new Layer
	width: 300
	height: 300
	superLayer: bg

mars = new Layer
	width: 300
	height: 300
	y: Screen.height + 100
	superLayer: bg

helloWorld = new Layer
	width: 544
	height: 61
	opacity: 0
	width: 300
	superLayer: bg

Animations

Animations are super cool. The properties of any layer can be animated, including positioning x, y, size properties like width, height, scale, opacity, rotation and more. Multiple properties can be animated at the same time.

What is also great is that we can have more control over time of the animation, and physics by adjusting curves. Framer allows to use pre-defined curves like ‘linear’ or ‘ease-in’, custom bezier curves and spring animations. The key part with animation is that animations can be triggered by any user interaction based event, like TouchStart or TouchEnd. This makes your prototype realistic when it comes to testing.

scaleUp = new Animation
	layer: earth
	properties: 
		scale: 2

scaleUp.start()	

moveUp = new Animation
	layer:earth
	properties: 
		y: -200
	delay: 0
	time: 1

fadeUp = new Animation
	layer: helloWorld
	properties: 
		opacity: 1
		scale: 3
	time: 2

scaleUp.on(Events.AnimationEnd, moveUp.start)
scaleUp.on(Events.AnimationEnd, fadeUp.start)

Events

Events are things that can happen to a layer, mostly triggered by user interactions. With events you can animate layers based on these interactions. Framer contains many events: click events, touch events, scroll events, drag events and more.

bg.on Events.TouchStart, ->

	showMars = new Animation
		layer: mars
		properties: 
			scale: 2 
			y: 600
		time: 2

	showMars.start()

	helloWorld.visible = false
	earth.animate 
			properties: 
				y: - 600	
				
	for i in [1...200]
		
		warpSpeed = new Animation
			layer: stars[i]
			properties: 
				height: 300
				opacity: 0.3
			time: 0.6
				
		normalSpeed = new Animation
			layer: stars[i]
			properties: 
				height: Utils.randomNumber(1, 4)
				y: stars[i].y + 300		
			time: 0.2
		
		warpSpeed.start()
				
		warpSpeed.on(Events.AnimationEnd, normalSpeed.start)

Sharing

FramerJS authors put a lot of effort into making the prototypes easy to share.

There are several ways to share your work. If you are working closely with a team, you can just mirror the prototype so that everybody in the same network can have instant access to it via the browser, just typing the address.

You can also generate a unique link , like this one http://share.framerjs.com/3oscqup3cjne/, and share it with anybody. The good thing is that with a shareable link you can download the app, and instantly play with it, adjusting all the values in the code editor.

Preview on mobile devices

One of the most important advantages of framerJS, is that it goes native, and it fits all the devices. So you can actually preview the prototype and scale to any device you target with your app. To be able to preview the prototype on a mobile device, just download the app:

Community

FramerJS has a very dedicated community. It is very easy to start working with the tool and you get a lot of help from other prototypers. The community also shares samples, showcases, presenting new kinds of interactions. So if you are really concerned about User Experience, or cutting edge Interaction patterns, you just must be there.