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: 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
2.5 Functions
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