After completing the Greensock basics in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes with a touch of imagination and creativity. This is the moment when we really start to creatively use our code.
B-Sides, Bonuses and Oddities
17h 55m 38s
English
Paid
About the Author: Creative Coding Club
Creative Coding Club is a creative-technology teaching platform run by Carl Andersen, focused on the creative and visual side of programming — generative art, p5.js / Processing, Three.js, shader programming, and the WebGL / GLSL toolchain that sits underneath modern browser graphics work.
The CourseFlix listing carries four Creative Coding Club courses on generative art, creative coding fundamentals, and the visual programming patterns that bridge design and code. Material is paid and aimed at designers and developers building creative-technology work rather than business applications.
Watch Online 87 lessons
0:00
/ #1: Laziest Response Slider Using repeatRefresh
All Course Lessons (87)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Laziest Response Slider Using repeatRefresh Demo | 01:53 | |
| 2 | Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text | 17:55 | |
| 3 | Reveal dots while animation plays | 13:11 | |
| 4 | Constant Speed with Random Motion | 18:56 | |
| 5 | Directional Rotation | 09:57 | |
| 6 | Bug Race in a Single Tween | 14:16 | |
| 7 | Bug Race Complete: Jerk Level and Weighted Random Values | 15:10 | |
| 8 | Hacking Ease Curves | 08:02 | |
| 9 | Basic Animated Counter using Snap Plugin | 08:54 | |
| 10 | Customizable and Re-usable Counter Effect | 15:26 | |
| 11 | Auto-close open item // reverse current timeline | 15:35 | |
| 12 | Animated Snow using Interpolate | 24:52 | |
| 13 | Favorite Mask Effects | 15:11 | |
| 14 | Using Clip-Path in a Custom Effect for Multi-directional Wipes | 20:33 | |
| 15 | Hard Edge Gradient Animated Fill | 15:27 | |
| 16 | Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration | 10:43 | |
| 17 | Mask-Up / Scale Down Part 2: optimizations and registerEffect() | 12:32 | |
| 18 | Text Mask Effect Using Blend Modes | 22:05 | |
| 19 | Advanced Clip-Path: Staggered Corners | 15:03 | |
| 20 | Advanced Clip-Path: Angled Wipe and Pendulum Wipe | 06:39 | |
| 21 | Advanced Clip-Path: Multi-Bar Wipe | 12:17 | |
| 22 | 3D Card Flip Effect (double-sided) | 17:17 | |
| 23 | Interactive 3D Card Flip | 13:28 | |
| 24 | 3D Card Flip Basic Game | 12:33 | |
| 25 | Responsive Hover Nav | 19:35 | |
| 26 | Gallery with Burn-in Effect | 12:56 | |
| 27 | Image Comparison Tool with Draggable | 17:32 | |
| 28 | Gradient Filled Text on Scroll | 16:59 | |
| 29 | Intro to ScrambleText Plugin | 11:58 | |
| 30 | Staggered Text Effect with ScrambleText | 14:35 | |
| 31 | Creating distinct enter and leave animations with a single timeline | 18:03 | |
| 32 | Circular Distribution of Elements without much Math | 23:35 | |
| 33 | Ferris Wheel: Counter-rotation to keep spinning elements upright | 18:53 | |
| 34 | Interactive Peacock with Modern GreenSock | 23:58 | |
| 35 | Banner: Clean loops and custom end screens : Part 1 Callbacks | 10:12 | |
| 36 | Banner: Clean loops and custom end screens : Part 2 TweenTo() | 08:53 | |
| 37 | Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup | 18:13 | |
| 38 | Multiline Text Mask Effect Part2: Responsive | 22:18 | |
| 39 | Using CSS Clamp for Responsive Text Sizing | 10:18 | |
| 40 | Angled ClipPath Text Reveal (plastic.design) | 08:13 | |
| 41 | Angled ClipPath Text Reveal: SplitText Double Split and Responsive | 09:03 | |
| 42 | Zero-Duration Tweens and set() | 08:23 | |
| 43 | Zero-Duration Tweens Part 2: addPause() | 18:54 | |
| 44 | Gallery with AutoPlay Part 1: File Setup / Basic Functionality | 15:18 | |
| 45 | Gallery with Autoplay Part 2: Toggle Switch | 26:05 | |
| 46 | Breaking Free of the Timeline Mindset: Part 1 | 21:33 | |
| 47 | Breaking Free of the Timeline Mindset Part 2 | 15:19 | |
| 48 | Breaking Free of the Timeline Mindset Part 3 | 13:51 | |
| 49 | Creeping and Jumping Dots | 14:28 | |
| 50 | Physics Plugins Part 1: PhysicsProps | 09:50 | |
| 51 | Physics Plugins Part 2: Physics2D | 06:15 | |
| 52 | Rotating Input Dials (SVG) | 10:11 | |
| 53 | Challenge: Slime Conveyor Belt | 10:35 | |
| 54 | Solution: Slime Conveyor Belt | 12:17 | |
| 55 | Constant Loop with Return to Start | 12:34 | |
| 56 | Drop Down Descramble Part 1: Technical Exploration | 10:20 | |
| 57 | Drop Down Descramble Part 2: Building the Animation | 17:25 | |
| 58 | Animating background-size cover and contain | 15:15 | |
| 59 | Constant Loop with Return to Start: Part 2: Smart Reverse | 14:07 | |
| 60 | Staggered Bars Wipe Transition | 12:30 | |
| 61 | HSL Rainbow Spread | 01:22 | |
| 62 | Text Around A Cube | 17:14 | |
| 63 | Text Around a Cube Part 2: Making it Responsive | 18:23 | |
| 64 | Animating Half-Tone Patterns | 16:29 | |
| 65 | Animating Half-Tone Patterns on Scroll (inside text) | 08:36 | |
| 66 | Half-tone Patters: Advanced Customization | 12:55 | |
| 67 | Apply a CustomEase to a MotionPath Tween | 06:23 | |
| 68 | How I Built my CustomEase Visualizer | 10:57 | |
| 69 | Dynamic Text Effect Self Playing | 07:09 | |
| 70 | Dynamic Interactive Text Effect | 05:33 | |
| 71 | Starter File Explanation | 02:59 | |
| 72 | Challenge Outer Loop | 00:43 | |
| 73 | Solution Outer Loop | 03:04 | |
| 74 | Challenge Stagger Drop | 00:44 | |
| 75 | Solution Stagger Drop | 02:36 | |
| 76 | Challenge Box Jumper Level 1 | 00:24 | |
| 77 | Solution Box Jumper Level 1 | 02:13 | |
| 78 | Challenge: Off the Cliff Level 1 and Level 2 | 01:49 | |
| 79 | Solutions: Off The Cliff Level 1 and Level 2 | 16:45 | |
| 80 | Challenge: Collision | 01:35 | |
| 81 | Solution: Collision | 06:57 | |
| 82 | Introducing The Variable | 08:46 | |
| 83 | The Variable: Button Hotspots | 08:19 | |
| 84 | The Variable: Building a Single Stage | 07:49 | |
| 85 | The Variable: Building Multiple Stages | 06:52 | |
| 86 | The Variable: Combining Stages and Line Morph | 14:51 | |
| 87 | The Variable: Full-page Hotspots and Determining Quadrants | 15:52 |
Unlock unlimited learning
Get instant access to all 86 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionCourse content
87 lessons · 17h 55m 38sShow all 87 lessons
- 1 Laziest Response Slider Using repeatRefresh 01:53
- 2 Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text 17:55
- 3 Reveal dots while animation plays 13:11
- 4 Constant Speed with Random Motion 18:56
- 5 Directional Rotation 09:57
- 6 Bug Race in a Single Tween 14:16
- 7 Bug Race Complete: Jerk Level and Weighted Random Values 15:10
- 8 Hacking Ease Curves 08:02
- 9 Basic Animated Counter using Snap Plugin 08:54
- 10 Customizable and Re-usable Counter Effect 15:26
- 11 Auto-close open item // reverse current timeline 15:35
- 12 Animated Snow using Interpolate 24:52
- 13 Favorite Mask Effects 15:11
- 14 Using Clip-Path in a Custom Effect for Multi-directional Wipes 20:33
- 15 Hard Edge Gradient Animated Fill 15:27
- 16 Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration 10:43
- 17 Mask-Up / Scale Down Part 2: optimizations and registerEffect() 12:32
- 18 Text Mask Effect Using Blend Modes 22:05
- 19 Advanced Clip-Path: Staggered Corners 15:03
- 20 Advanced Clip-Path: Angled Wipe and Pendulum Wipe 06:39
- 21 Advanced Clip-Path: Multi-Bar Wipe 12:17
- 22 3D Card Flip Effect (double-sided) 17:17
- 23 Interactive 3D Card Flip 13:28
- 24 3D Card Flip Basic Game 12:33
- 25 Responsive Hover Nav 19:35
- 26 Gallery with Burn-in Effect 12:56
- 27 Image Comparison Tool with Draggable 17:32
- 28 Gradient Filled Text on Scroll 16:59
- 29 Intro to ScrambleText Plugin 11:58
- 30 Staggered Text Effect with ScrambleText 14:35
- 31 Creating distinct enter and leave animations with a single timeline 18:03
- 32 Circular Distribution of Elements without much Math 23:35
- 33 Ferris Wheel: Counter-rotation to keep spinning elements upright 18:53
- 34 Interactive Peacock with Modern GreenSock 23:58
- 35 Banner: Clean loops and custom end screens : Part 1 Callbacks 10:12
- 36 Banner: Clean loops and custom end screens : Part 2 TweenTo() 08:53
- 37 Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup 18:13
- 38 Multiline Text Mask Effect Part2: Responsive 22:18
- 39 Using CSS Clamp for Responsive Text Sizing 10:18
- 40 Angled ClipPath Text Reveal (plastic.design) 08:13
- 41 Angled ClipPath Text Reveal: SplitText Double Split and Responsive 09:03
- 42 Zero-Duration Tweens and set() 08:23
- 43 Zero-Duration Tweens Part 2: addPause() 18:54
- 44 Gallery with AutoPlay Part 1: File Setup / Basic Functionality 15:18
- 45 Gallery with Autoplay Part 2: Toggle Switch 26:05
- 46 Breaking Free of the Timeline Mindset: Part 1 21:33
- 47 Breaking Free of the Timeline Mindset Part 2 15:19
- 48 Breaking Free of the Timeline Mindset Part 3 13:51
- 49 Creeping and Jumping Dots 14:28
- 50 Physics Plugins Part 1: PhysicsProps 09:50
- 51 Physics Plugins Part 2: Physics2D 06:15
- 52 Rotating Input Dials (SVG) 10:11
- 53 Challenge: Slime Conveyor Belt 10:35
- 54 Solution: Slime Conveyor Belt 12:17
- 55 Constant Loop with Return to Start 12:34
- 56 Drop Down Descramble Part 1: Technical Exploration 10:20
- 57 Drop Down Descramble Part 2: Building the Animation 17:25
- 58 Animating background-size cover and contain 15:15
- 59 Constant Loop with Return to Start: Part 2: Smart Reverse 14:07
- 60 Staggered Bars Wipe Transition 12:30
- 61 HSL Rainbow Spread 01:22
- 62 Text Around A Cube 17:14
- 63 Text Around a Cube Part 2: Making it Responsive 18:23
- 64 Animating Half-Tone Patterns 16:29
- 65 Animating Half-Tone Patterns on Scroll (inside text) 08:36
- 66 Half-tone Patters: Advanced Customization 12:55
- 67 Apply a CustomEase to a MotionPath Tween 06:23
- 68 How I Built my CustomEase Visualizer 10:57
- 69 Dynamic Text Effect Self Playing 07:09
- 70 Dynamic Interactive Text Effect 05:33
- 71 Starter File Explanation 02:59
- 72 Challenge Outer Loop 00:43
- 73 Solution Outer Loop 03:04
- 74 Challenge Stagger Drop 00:44
- 75 Solution Stagger Drop 02:36
- 76 Challenge Box Jumper Level 1 00:24
- 77 Solution Box Jumper Level 1 02:13
- 78 Challenge: Off the Cliff Level 1 and Level 2 01:49
- 79 Solutions: Off The Cliff Level 1 and Level 2 16:45
- 80 Challenge: Collision 01:35
- 81 Solution: Collision 06:57
- 82 Introducing The Variable 08:46
- 83 The Variable: Button Hotspots 08:19
- 84 The Variable: Building a Single Stage 07:49
- 85 The Variable: Building Multiple Stages 06:52
- 86 The Variable: Combining Stages and Line Morph 14:51
- 87 The Variable: Full-page Hotspots and Determining Quadrants 15:52
Related courses
-
NewAdvanced Frontend Course - Master Professional Frontend Development
By: Dmitriy ZhiganovAn advanced course for middle and junior front-end developers. Master tool selection and reasoning behind solutions in order to successfully grow and pass inter5 hours 38 minutes 37 seconds -
Code With Antonio Workshops
By: Antonio Erdeljac (Code With Antonio)These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.17 hours 3 minutes 7 seconds -
NewFrontend System Design Essentials
By: Juntao QiuLearn to design scalable frontend systems. Understand architectural trade-offs and key patterns for professional developers.5 hours 55 minutes 36 seconds
Frequently asked questions
What is B-Sides, Bonuses and Oddities about?
After completing the Greensock basics in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes with a touch of imagination and creativity. This is the moment when we really start to…
Who teaches B-Sides, Bonuses and Oddities?
B-Sides, Bonuses and Oddities is taught by Creative Coding Club. You can find more courses by this instructor on the corresponding source page.
How long is B-Sides, Bonuses and Oddities?
B-Sides, Bonuses and Oddities contains 87 lessons with a total runtime of 17 hours 55 minutes. All lessons are available to watch online at your own pace.
Is B-Sides, Bonuses and Oddities free to watch?
B-Sides, Bonuses and Oddities is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch B-Sides, Bonuses and Oddities online?
B-Sides, Bonuses and Oddities is available to watch online on CourseFlix at https://courseflix.net/course/b-sides-bonuses-and-oddities. The page hosts every lesson with the integrated video player; no download is required.