Build Advanced UI Animations With Framer Motion & React
<div>
</div>This is Framer Motion. Add a "motion." prefix. Sprinkle some props. Animate on!
It's THAT easy!
But, let me ask you a question. 👇
<div>
<motion.span
animate={{ scale: 4 }}>
👊
</motion.span>
</div>
What kind of animation would you get?
The correct answer is D because -- there is no animation at all!
It's NOT a bug. It's due to the rules of HTML:span has display: inline by default, and CSS transforms (such asscale) don't work on inline elements if its parent is a block element. To make it work, we could set its display to either block or inline-block. You can play with the code here.
Framer Motion is a great library. But it can be tricky to get it to work in real-world applications. This is not to blame the library. It's because the reality is complex. Web development sometimes IS tricky!
Here are a few more examples:
- How would I make Motion work with React Router?
- Why is the text distorted during the transition?
- Why doesn't
AnimatePresencework even if you set the element todisplay: none? - I removed an item from the list, why is it still there?
- Why does
<AnimateSharedLayout type="crossfade">behave the same as<AnimateSharedLayout type="switch">? - ...
I've struggled on questions like these since 2019 when Motion V1 was launched. You'd likely, if not already, stumble upon them too!
I've spent hundreds of hours chasing down the why's and solutions. As an example, it took me 3 days to understand AnimateSharedLayout and its relationship to AnimatePresence. Three full days!
Good news: I've turned these struggling hours into a faster solution for you! 👇
Smiley In Motion
A Framer Motion course on abusing emojis mental models, tips & tricks, and common pitfalls
- Focus on mental models
- Get started from the fundamentals
- Build a complete mental model of all the features. Know when to use what.
- Real-world use cases
- Drag to reorder, Circular slider
- Bottom sheet, Parallax scroll
- Tabs, Shared element transition (React Router)
- And... this page!
- Cheat sheets
- Bite-size content summaries
- A list of pitfalls I've stumbled upon
- Fun examples
- As promised, this course includes tricks about abusing emojis.
Get The Course
- 21 lessons, 2 hours of HD videos
- All starter and final code for you to follow along
- Cheat sheets
Table Of Contents
- 1. Framer Motion mental modelPreview
- 2. Animate any HTML or SVG tagPreview
- 3. Keyframes and animation value typesPreview
- 4. Spy on animations with MotionValue
- 5. Orchestrate animations in a React tree
- 6. Stagger children animations
- 7. Animate layout changes
- 8. Animate mount/unmount transitions
- 9. AnimatePresence, key and layout
- 9.1 AnimatePresence patterns
- 9.2 Understand AnimatePresence
- 10. Understand initial, style, and animate
- 11. Drag gesture
- 12. Drag & MotionValue
- 13. Drag & layout animation
- 14. Add custom dragging with pan gesture
- 15. Animate shared items across components
- 16. Spy on scroll progress
- 17. Take control of animations imperatively
- 18. Animate custom components
- r1. Drag to reorderPreview
- r2. Circular slider
- r3. Tabs (AnimatePresence and React Router 5)
- All starter and final code
- Cheat sheet: pitfalls & solutions
Hi! I'm Linton!
I'm a full-stack developer and I love design. I've been teaching React since 2017 and I'm loving it! I'm also the author of a couple of courses at Treehouse and Lynda.
My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.
Thrilled to be on this journey with you!
Hey! I'm Beebee!
I'm a designer and animator. I draw inspiration from my dream diaries.
In my dreams, I saw mammoths chasing little bears on a circus. I managed to turn missiles launched from North Korea into splendid firework shows. I convinced the Emperor of Qin Dynasty to stop killing. I chatted with Prince Edwards in Chinese. I was left in awe by the weirdly breathtaking scenes made up of lily pads, lotus, water grass and pale dead fish...
What's in your dreams?