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: framer.com/api

Syntax

Theory

Questions


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


Syntax


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"

Variables

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).