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
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
Assignment 10.2 Currency Exchange Rate Chart
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now