Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Smiley In Motion
Fundamentals
1. Framer Motion Mental Mode (1:48)
2. Animate Any Html Or Svg Tag (5:41)
3. Keyframes And Animation Value Types (4:28)
4. Spy On Animations With MotionValue (6:02)
5. Orchestrate Animations In A React Tree (8:22)
6. Stagger Children Animations (5:57)
7. Animate Layout Changes (5:34)
8. Animate Mount & Unmount Transitions (4:43)
9. AnimatePresence, Key And Layout (7:33)
9.1 AnimatePresence Patterns (2:24)
9.2 Understand AnimatePresence (4:57)
10. Understand initial, style, And animate props (7:03)
11. Drag Gesture (2:03)
12. Drag & Motionvalue (3:23)
13. Drag & Layout Animation (4:59)
14. Add Custom Dragging With Pan Gesture (11:08)
15. Animate Shared Items Across Components (5:05)
16. Spy On Scroll Progress (7:45)
17. Take Control Of Animations Imperatively (4:50)
18. Animate Custom Components (5:14)
Real-world Examples
R1. Drag To Reorder (8:43)
R2. Circular Slider (7:24)
R3. Tabs (AnimatePresence And React Router 5) (10:03)
Cheat sheets
Common pitfalls
Wrap up
1. Framer Motion Mental Mode
Complete and Continue