Framer

The Framer book explains everything about using code in Framer. It shows you how to create different kinds of animations, has all the details about overrides, and teaches you how to create your own code components. This Framer course also doubles as an extended manual that you’ll often refer to.

Last update: November 26, 2020

200+ example prototypes made with code

100+ Motion projects in CodeSandbox

100,000+ words of detailed explanations

Markus Lindmark

“This clear and example-rich book gave me a deeper understanding of Framer and React. As a designer, I nowadays enjoy opening up the Code tab to design by code.”

Markus Lindmark

UX Designer at HiQ

Marie Schweiz

“With the Framer book, I have a reliable source which is incredibly well made. Structure and writing are just excellent.”

Marie Schweiz

Freelance Interaction & UX Designer

Utsav Shah

“The Framer book has always been my go-to resource when making something in Framer. It’s incredible how well written the book is.”

Utsav Shah

Designer at Bose

Sascha Michael Trinkaus

“Seriously concise info about Framer that covers most of what you want to learn. Tes has a great way of explaining a broad range of concepts from simple to more complex.”

Sascha Michael Trinkaus

UX Designer at GoDaddy Inc.

Kevin Cannon

“Framerbook is the hidden Framer manual I always turn to. It keeps up to date with Framer’s changes and is extremely well written.”

Kevin Cannon

Product Designer at Pitch

Anthony Kiplimo

“The Framer book is well laid out and easy to understand, especially from a developer standpoint.”

Anthony Kiplimo

Simon Lucas

“Tes’ book is my go-to resource for everything to do with Framer. The detailed explanations with accompanying code examples really helps you get to grips with Framer and React. Highly recommended!”

Simon Lucas

UX Prototyper at Channel 4

“The Framer book is like a magic cheatsheet for when I get stuck.”

Shuo Yang

Design manager

Packages

Table of contents

  1. Design Components
    1. Design Components
  2. Overrides
    1. Overrides
    2. Framer’s Data Object
    3. Using CreateStore
    4. Overriding Design Components
    5. Overriding Code Components
  3. Code Components
    1. Code Components
    2. A Simple Code Component
    3. Why Use <Frame>s?
    4. Compatibility with Overrides & Parent Components
    5. Including Other Components
    6. Customizing an Existing Component
    7. Property Controls
  4. Animation
    1. Animation Free
    2. The Animate Property Free
    3. The Transition Property Free
    4. While Hover and While Tap Free
    5. Variants
    6. Hooks
    7. The useState() Hook
    8. Animate Presence
    9. The useCycle() Hook
    10. The useAnimation() Hook
    11. Keyframes
    12. Tips for Overrides
    13. Animatable Properties
    14. Animation Curves
    15. Animating a Scroll Component
    16. A Frame’s Animation Properties
    17. Example Animations Free
  5. Framer Motion
    1. Framer Motion Free
    2. Create React App
    3. CodeSandbox
    4. Differences With the Framer API
    5. Automatic Layout Animations
    6. Shared Layout Animations
    7. Layout ID
    8. Scroll-based Animations New
    9. SVG Animations New
    10. Routing New
  6. Smart Components
    1. Smart Components Free
    2. Props Versus State
    3. Passing Down Props
    4. Sharing State
    5. Letting a Prop Change the State
    6. Simple But Smart
    7. iOS Segmented Control Free
  7. Dragging
    1. Dragging Updated
    2. Axis and Direction Locking Updated
    3. Drag Constraints Updated
    4. Drag Elastic Updated
    5. Drag Momentum Updated
    6. Inertia Animations Updated
    7. Modify Target Updated
    8. Min and Max Updated
    9. Snap to Grid Example Updated
    10. Snap to Corner Example Updated
    11. Drag Events Updated

Upcoming 👨‍💻:

  • November 16 — Update of Dragging because the APIs changed
  • November 20 — Framer Motion: Routing (with React Router)
  • November 27 — Framer Motion: Scroll-based animations
  • December 4 — Framer Motion: Imperative drag controls
  • Later in December: Tracking gestures with MotionValues

Questions? Check the FAQ.

This video shows projects from: Animation, Property controls, and Dragging

The above video is from a while back. The Animations section, for instance, now has about twice the amount of content:


Join the Framer book mailing list

± 6 emails/year

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.


3 days ago
Grab this deal between #BlackFriday and #CyberMonday:

The @framer book 📘 at the lowest price it’s ever been!
̶$̶7̶0̶ ̶ → 🎁$40

Use code ‘FRIDAY20’ when checking out.

https://t.co/n3fCk0HBRs https://t.co/4qyMcYJPEP
framerbook photo
3 days ago
New in the @framer 📘 book:
Scroll-based animations w/ Framer Motion

Viewport scroll:
ℹ️Animations that follow the scrolling of the web page
🌐 https://t.co/F8C1WtZFkM

Element scroll:
ℹ️Animations that follow a scrollable element on the page
🌐 https://t.co/Zno3SZgvWW https://t.co/998iVLyVcH
4 days ago
Framer を勉強したい人向けの教材とサンプルコードが 30% オフ。 https://t.co/CDIrO3KhlI
6 days ago
New in the 📘 Framer book : Routing.

1️⃣ Create a @reactjs website
2️⃣ Add pages with React Router
3️⃣ Create transitions between them with @Framer Motion’s <AnimatePresence>

🌐 Live version: https://t.co/dvbjkY4uGO
📦 CodeSandbox: https://t.co/FtZnqg7OHB https://t.co/eTKhNXRvfW
3 weeks ago
New in the @Framer book: Framer Motion!
https://t.co/H9Z3xVJPGr

— a thread 👇

1️⃣ Getting started with @reactjs

🔹Start a project with Create React App, add Framer Motion, and deploy it to a website
🔹How to do the same with CodeSandbox
🔹Code differences with the Framer API https://t.co/fHX4kN7YEP
3 weeks ago
Add some Framer Motion 🔮 magic to your ⚛ Create React App !

SVG path animation w/ Motion’s pathLength, pathSpacing, & pathOffset props

🌍 Live version: https://t.co/boDLTiWClF
🗄️ CRA project: https://t.co/eygd0hraoh
📦 CodeSandbox: https://t.co/ASS3x7KO5E

@reactjs @framer https://t.co/33aPasa8e4
framerbook photo