Build Advanced UI Animations With Framer Motion & React

⭐️⭐️⭐️⭐️⭐️
<div>





</div>
🤨
🦵
🦵
👊
👊
Scroll

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?

A.quickly scales 4x, loop
B.quickly scales 4x
C.slowly scales 4x
D.none of the above

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 AnimatePresence work even if you set the element to display: 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

2 hours of 24 bite-sized HD videos
🧠
  • 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

Smiley In Motion
For designers and developers experienced in React
  • 24 lessons, 2 hours of HD videos
  • All starter and final code for you to follow along
  • Cheat sheets
$99$69USD
Buy Now
Limited time offer!
React + Framer Starship bundle
Learn from the start. No JS experience required
  • 14 Modules, 50 lessons, 10+ hours of HD videos
  • Includes Smiley In Motion
  • All starter and final code for you to follow along
  • Check out course details
$299$219USD
Buy Now
Limited time offer!
Linton's online courses provide a live resource to upgrade UX/UI designer's prototyping skill to the next level.
Shuo-hsiu Hsu
UX/UI Designer, Airbus

Table Of Contents

Foundation
  • 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
Real-world Examples
  • r1. Drag to reorderPreview
  • r2. Circular slider
  • r3. Tabs (AnimatePresence and React Router 5)
  • r4. Shared element transition (with React Router 5) (coming soon)
  • r5. Bottom sheet (coming soon)
  • r6. smileyinmotion.com (coming soon)
Cheat sheets
  • 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?


Special Thanks to Matt Perry for answering my endless questions.