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: February 23, 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. Overrides
    1. Overrides
    2. Framer’s Data Object
    3. Using CreateStore
    4. Overriding Design Components
    5. Overriding Smart Components New
    6. Overriding Code Components
  2. 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
  3. Animation
    1. Animation Free
    2. The Animate Property Free
    3. The Transition Property Updated Free
    4. ‘While’ Animations and Initial Updated Free
    5. Variants Updated
    6. Hooks
    7. The useState() Hook
    8. Animate Presence Updated
    9. The useCycle() Hook
    10. The useAnimation() Hook
    11. Keyframes
    12. Tips for Overrides
    13. Animatable Properties Updated
    14. Animation Types Updated
    15. Animating Scroll Position Updated
    16. API Overview New Free
    17. Example Animations Updated Free
  4. 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
    9. SVG Animations
    10. Drag Controls
    11. Routing
  5. 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
  6. Dragging
    1. Dragging
    2. Axis and Direction Locking
    3. Drag Constraints
    4. Drag Elastic
    5. Drag Momentum
    6. Inertia Animations
    7. Modify Target
    8. Min and Max
    9. Snap to Grid Example
    10. Snap to Corner Example
    11. Drag Events

Upcoming 👨‍💻:

  • New section: Tracking gestures with MotionValues
  • A global, introductory ‘Framer’s Toolbox’ section

Questions? Check the FAQ.


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
Using overrides with @framer’s new Smart Components:

🔹 Overriding a ‘variant’ triggers an animation
🔹 Overriding a ‘variable’ simply changes it (no animation)
🔹 You can use standard browser events (e.g., onClick)

Here’s an example that does all three:
https://t.co/qSZgkDJ3dA https://t.co/BnABCNV4i5
2 weeks ago
Recent animation updates in the @Framer book
— a thread 👇

(Some pages are free, as in 🍺; for others 🔒, you need a Framer book subscription.)

1️⃣ API overview

New page with an overview of all properties, events, special components, and utilities.

🍺 https://t.co/mAatsBUmPj https://t.co/LLtl0xA935
framerbook photo
3 months ago
Use @framer Motion’s DragControls to start a drag from another element (optionally snaps to cursor)

Create a slider (by @mattgperry):
🌐 https://t.co/C5SU6GX6GN
📦 https://t.co/O7GNJxDB0L

… or a trackpad for a space game:
🌐 https://t.co/bvnMBymYaf
📦 https://t.co/rIpMSjoy9q https://t.co/5IWz02jnGJ
3 months ago
Very happy to get a mention in the @framerbook update on Scroll-based Animations, thanks folks!
It's a test on SVG animation for my upcoming portfolio site.
I've updated it to use the new FramerMotion v2, here's the codesandbox if you want to check it out:
https://t.co/MZkVF7Xuk5
3 months 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 months 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