Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Prototyping with React+Framer: Advanced Modules
Mouse Parallax
Source Code List
4.1 Lay Out The Scene (2:17)
4.2 onMouseMove (5:46)
4.3 Add Parallax Movements (8:07)
Assignment 4.1: 3D card
4.3.1 Object Destructuring (4:43)
4.4 React Hooks (4:58)
4.5 The true face of JSX tags (5:59)
4.6 Convert JSX Tags With Children Into JS (6:26)
Assignment 4.2: JSX to JS
Radio Group (React State)
6.1 Make A Simple Counter (6:23)
6.2 Add State To The Counter (4:41)
Assignment 6.1: Counter
6.3 Start Making RadioGroup (4:02)
6.4 Create A Reusable RadioGroup (6:59)
6.5 Pass Along Props (4:23)
6.6 True Face Of The Spread Operator (5:38)
6.7 Add State To RadioGroup (5:27)
6.8 True Face Of useCycle (5:29)
Assignment 6.2 Card Deck Continued
Assignment 6.3. Bonus
Animation Orchestration
7.1 Unlock The Padlock - Sequence Animations (5:58)
7.2 Understand async/await (3:06)
7.3 Build The Failed Unlock Animation (6:10)
Assignment 7.1 Flashcard Transition
7.4 Build A FAB (6:04)
7.5 staggerChildren (7:40)
7.6 Keyframes (4:21)
Assignment 7.2 Complete Flashcard Transition
Scroll Parallax
8.1 Simple Scroll Effects (6:49)
8.2 Sticky Icon New (6:31)
Assignment 8.1: Image Background Parallax
8.3 Other Parallax Hooks (5:52)
Assignment 8.2: iPhone XR Marketing Page
8.4 Walkthrough Of Assignment 8.2 (6:06)
Advanced Framer X
9.6 Code Component Property Controls (6:39)
9.7 Design & Code Components (4:22)
Stock Chart
10.1 Find A Chart Library (2:48)
10.2 Make A Line Chart (4:12)
10.2.1 Import Stock Data (4:39)
10.3 Convert Data Shape (12:52)
Assignment 10.1: High & Low Prices
10.4 Download Data From An Api (8:49)
10.5 Fix Infinite Loop With useEffect (4:17)
10.6 Select Stock Symbol - More About useEffect (8:20)
10.7 Add Another Progress Indicator (4:51)
10.8 Handle Errors (9:45)
Assignment 10.2 Currency Exchange Rate Chart
Framer Motion
11.1 Introduction To Framer Motion (2:12)
11.2 Use Framer Motion To Build Toggle (6:12)
Assignment 11.1: Build swiping card with Motion
11.3 Task List (5:00)
11.4 Why AnimatePresence? (3:00)
11.5 A Common Error About Keys (3:53)
11.6 Task List With Checkmarks (8:07)
11.7 Counter Number Switch (5:11)
11.8 Create Scroll Effects With Framer Motion (5:48)
Assignment 11.2: Count down animation
SVG animations
12.1 Progress Indicator In Framer X (4:14)
12.2 Progress Indicator With Motion (7:27)
Assignment 12.1 Animate checkmark
12.3 Make A Circular Dial (6:12)
12.4 Move The Knob Along The Circle (6:11)
12.5 Set pathLength Of The Circle (10:16)
Assignment 12.2 Two-knob dial
12.1 Progress Indicator In Framer X
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock