This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
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
9.2 Understand AnimatePresence
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock