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

“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

“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
Packages
-
The Framer book$70.00 / year
-
The Framer book for Enterprise$30.00 per member / year
-
The Framer book for Teams$40.00 per member / year
Table of contents
- Overrides
- Code Components
-
Animation
- Animation Free
- The Animate Property Free
- The Transition Property Updated Free
- ‘While’ Animations and Initial Updated Free
- Variants Updated
- Hooks
- The useState() Hook
- Animate Presence Updated
- The useCycle() Hook
- The useAnimation() Hook
- Keyframes
- Tips for Overrides
- Animatable Properties Updated
- Animation Types Updated
- Animating Scroll Position Updated
- API Overview New Free
- Example Animations Updated Free
- Framer Motion
- Smart Components
- Dragging
Upcoming 👨💻:
- New section: Tracking gestures with MotionValues
- A global, introductory ‘Framer’s Toolbox’ section
Questions? Check the FAQ.
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
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

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

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