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

“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

“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

“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

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

“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

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

Anthony Kiplimo

“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

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.

Leave this field empty if you're human:

The Framer book @framerbook

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

View on Twitter

1

2

The Framer book @framerbook

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

View on Twitter

1

1

The Framer book @framerbook

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

View on Twitter

2

10

The Framer book Retweeted · Duncan Crozier @duncancrozier

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

View on Twitter

3

0

The Framer book @framerbook

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

View on Twitter

1

2

The Framer book @framerbook

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

View on Twitter

4

16