March 08, 2015

40+ Examples Of How To Design With Code Using Framer

A couple of weeks ago I visited the frozen tundra known as the American Midwest to teach a super fun all-day workshop on Framer entitled “Designing With Code” (and then play Legos with my nephew all weekend). Part of the workshop material was a bunch of Codepens designed to illustrate Framer’s building blocks as well as general interaction design principles.

I’ve gathered them all in a Codepen Collection but it’s easier to browser through them by title in a simple list. Here it is!

Framer Basics

The most basic layer possible
Superlayers, sublayers and hierarchy
Layer position and the .frame
Introducing layer properties
Layer depth and z-index
More layer properties
Image, video and HTML layers
Filters & shadows
Styling layers with CSS

Events & Interactions

Introduction to event listening
Click, mouse and touch events
Drag and drop
Drag events
Scrolling layers
Masking and the .clip property
Video layer events
Event coordinates


Animating a layer
Introduction to easing
Animation objects
Animation events and chaining
More animation events
Bezier animation curves
Animating using spring-rk4
Animating with spring-dho
Framer’s state machine
Navigating between states
Animating along a curve (or not)

Interaction Design Patterns & Principles

Animating multiple elements
Overlapping motion
Responsive UI
Simulated resistance
Basic modulation
Modulating visual properties
Simulated velocity
Snapping to thresholds

Dynamic Prototypes

HTML and CSS in Framer
Styling dynamic text
API data and JSON
Firebase integration
Extending the Layer class