Framer API

A complete API reference of the Framer Library, a JavaScript library made for rapid interactive prototyping for web and mobile.

Overview

Framer provides helpers for advanced physics-based animation, complex touch-based gestures and common components for scrolling, paging and interface flows. It’s designed to allow beginners to explore digital product ideas without boundaries. It builds on the following technologies. To learn more about these, be sure to check out our ES6 and React Guide too.

React. A library to define components and build interfaces. It provides structure to your project by default so you can easily re-use and share.

// React component
function Card({ title }) { ... }

JSX. A way to use HTML-like syntax directly inside JavaScript so that you can express document structures in a familiar way.

// JSX markup
<Card title="Hello">World</Card>

TypeScript. An optional extension to ES6 JavaScript to add types so your editor understands the code you are writing, and can provide excellent inline autocomplete and documentation.

// TypeScript string property type
type CardProps = { title: string }

#Quick Start

#Installation

The Framer API was designed to work closely with Framer X, but is great as a standalone library. You can install it via npm, via your Command Line.

// Install Framer via command line
npm install framer

#Importing

Once installed, you can import Framer into your files.

// Import from Framer
import { Frame, Scroll, useCycle } from "framer"

#Framer X

To learn how to start using the Framer API within Framer X, you can watch this short Framer Playground video tutorial. It covers the following topics.

How to create new code components.
Where code components live.
How to preview code components.
How previewing works.
How error handling works.

Download Framer X ›

#Basics

#Animate

Let’s have a look at a simple animation that scales a Frame to half the size. Notice how you can mix Frame elements with regular HTML, just like you would do within any React component.

Learn More ›

export function MyComponent() {
  return <Frame animate={{ scale: 0.5 }} />
}

#Cycle

A more extensive example would be to toggle the scale value on a tap, which uses the useCycle hook to cycle through a set of values.

// Cycle scale on tap
export function MyComponent() {
  const [scale, cycle] = useCycle(3, 1)
  return (
    <Frame
      animate={{ scale: scale }}
      onTap={() => cycle()}
    />
  )
}

You can also use useCycle to cycle between sets of visual properties. Here, we’re also rotating the Frame on every tap, next to scaling it.

Learn More ›

// Cycle multiple properties on tap
export function MyComponent() {
  const [twist, cycle] = useCycle(
    { scale: 0.5, rotate: 0 },
    { scale: 1, rotate: 90 }
  )

  return <Frame animate={twist} onTap={() => cycle()} />
}

#Dragging

You can easily make any Frame draggable by using the drag property. To constrain dragging to a vertical or horizontal axis, you can include an optional "x" or "y" value.

Learn More ›

// Drag Frame in any direction
export function MyComponent() {
  return <Frame drag />
}

#Scrolling

For scrolling, you can wrap any content inside a Scroll component, which exceeds the size of the component either vertically or horizontally.

Learn More ›

// Scroll two Frames
export function MyComponent() {
  return (
    <Scroll>
      <Frame />
      <Frame />
    </Scroll>
  )
}