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
“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.”
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.”
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.”
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.”
Product Designer at Pitch
“The Framer book is well laid out and easy to understand, especially from a developer standpoint.”
“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 Teams$40.00 per member / year -
The Framer book for Enterprise$30.00 per member / year
Table of contents
- Design Components
- Overrides
- Code Components
-
Animation
- Animation Free
- The Animate Property Free
- The Transition Property Free
- While Hover and While Tap Free
- Variants
- Hooks
- The useState() Hook
- Animate Presence
- The useCycle() Hook
- The useAnimation() Hook
- Keyframes
- Tips for Overrides
- Animatable Properties
- Animation Curves
- Animating a Scroll Component
- A Frame’s Animation Properties
- Example Animations Free
- Framer Motion
- Smart Components
-
Dragging
- Dragging Updated
- Axis and Direction Locking Updated
- Drag Constraints Updated
- Drag Elastic Updated
- Drag Momentum Updated
- Inertia Animations Updated
- Modify Target Updated
- Min and Max Updated
- Snap to Grid Example Updated
- Snap to Corner Example Updated
- 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:
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
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
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
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
