Framer API

A complete API reference of the Framer Library, a JavaScript library made for rapid interactive prototyping for web and mobile.
Important: The new Library only works in the latest Framer X Beta.

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.

  • 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

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

Once installed, you can import Framer into your files.

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

#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 ›
// Animate scale to 50%
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 draggble 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>
  )
}