Framer ES6 / React Guide

This guide aims to learn you the basics around React and ES6 to know enough code to be dangerous”. From there you can use it to build interactive ideas with animations and gestures that we offer in the new Framer API.

  • If you want to really learn programming I can recommend (the free) Watch and Code

Enjoy! I hope you’ll have fun and make things you could only imagine before – @koenbok

Reference and Examples:




If you get stuck, come hang in the Group or on Slack.


Imports and Exports

Always make sure you have a React import on top (or jsx / tsx files won’t work). This is a bit annoying but JavaScript needs to know where to find your libraries.

import * as React from "react"

Then, make sure to import anything you need from Framer. You can find everything that is in the Framer library in the docs. The most common ones are Frame, Scroll and Page.

import { Frame, Scroll, Page, useCycle, useMotionValue} from "framer"

And if you want to export something yourself so that another file can import it:

export const name = "Koen" // In myFile.jsx

import { name } from "./myFile"


You can still use var but its modern version is let. Think of it as Let it be…”.

let name = "Koen"

You can use const if you know this variable should never change (try to always use this).