Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Prototyping with React+Framer: Starship (Deprecated)
1. Getting Started
1.1 Introduction (1:03)
1.1.1 Why Codesandbox? (1:15)
1.2 How does a website work? (2:17)
1.3 A Tour of CodeSandbox (5:43)
1.4 Code first impression (2:25)
1.5 JSX (4:11)
1.6 JSX vs. HTML (4:39)
Assignment 1.1 - Fix the bugs
2. Toggle
Source Code List
2.1 Boxes Of Legos (5:24)
2.2 Draw A Picture Of Toggle (5:29)
2.3 Objects (5:35)
2.4 Too Many Styling Options (7:01)
Assignment 2.1 - Style the toggle
2.5 Functions (5:57)
2.6 Calling Functions, Variables (8:14)
2.6.1 Let, Const, Var (3:17)
2.7 onTap (8:27)
2.8 Array (9:02)
2.9 Animate Attribute (7:06)
Assignment 2.2: Checkbox
2.10 Variants (8:27)
Assignment 2.3: Fancier checkbox
3. Slider
3.1 Sliders Are Frames Too (5:00)
3.2 Style The Slider (5:30)
3.3 Make The Slider Draggable (3:03)
3.4 onDrag (5:14)
3.5 Get Slider Position (4:15)
3.6 Make Skinny Happy - useAnimation (6:14)
3.6.1 Scope Of Variables (4:05)
3.7 Fix A Bug (5:14)
3.8 Create React Components (5:08)
3.9 Communicate Between Two Components (4:15)
3.10 Pass onDrag To Slider Component (4:27)
Assignment 3.1: Help Mr. Skinny pose
3.11 Skinny Has An Attitude - If Else (6:36)
Assignment 3.2: iOS Task Switcher
Assignment 3.3: More drag and drop
4. Mouse Parallax
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
5. Tinder Swipe
5.1 One Card Swipe (5:29)
5.2 Rotate Card While Dragging (5:58)
5.3 Revisit Mouse Parallax (5:29)
5.4 Improve Mouse Parallax (5:52)
Assignment 5.1: Revisit slider
5.5 useMotionValue vs. useAnimation (5:51)
5.6 Finish One Card Swipe (6:56)
5.7 A Deck Of Cards (5:20)
5.8 Array.map (5:57)
Assignment 5.2: Bottom Sheet
6. 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
7. 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
8. 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)
9. Framer X
9.1 Framer X Overview (2:04)
9.2 Use Magic Move To Build A Toggle (6:28)
9.3 Make Card Expand Prototype (4:02)
9.4 Overrides (4:53)
9.5 Card Expand In Overrides (5:06)
9.5.1 Communicate Between Overrides (4:59)
Assignment 9.1: Fix status bar animation
Assignment 9.2: Flashcard Transition
9.6 Code Component Property Controls (6:39)
9.7 Design & Code Components (4:22)
10. 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
11. 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
12. 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
7.1 Unlock The Padlock - Sequence Animations
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock