CF

B-Sides, Bonuses and Oddities

17h 55m 38s
English
Paid

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.

About the Author: Creative Coding Club

Creative Coding Club thumbnail

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 87 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Laziest Response Slider Using repeatRefresh
All Course Lessons (87)
#Lesson TitleDurationAccess
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 subscription

Related courses

Frequently asked questions

What prerequisites are needed before taking this course?
Before enrolling in this course, students should have completed the 'Express' and 'Beyond the Basics' courses from the Creative Coding Club. These courses cover Greensock basics which are essential for understanding and applying the concepts taught in this course. Familiarity with CSS and JavaScript is also important, as the course involves creating animations and effects using these technologies.
What types of projects will I build during the course?
The course includes various creative projects such as a 'Responsive Full Screen Circle' using CSS VMAX, a '3D Card Flip Effect', and a 'Bug Race' animation. Students will also work on interactive elements like a 'Gallery with Burn-in Effect' and a 'Gradient Filled Text on Scroll'. These projects help apply Greensock animation techniques in imaginative ways.
Who is the target audience for this course?
This course is designed for students who have a foundational knowledge of Greensock and are looking to apply that knowledge creatively. It's ideal for developers and designers interested in enhancing their animation skills using advanced techniques and for those who enjoy experimenting with visual effects and interactive projects.
Does the course cover any specific tools or plugins?
Yes, the course covers several specific tools and plugins. For example, students will learn about the Snap Plugin for creating animated counters and the ScrambleText Plugin for text effects. Physics Plugins such as PhysicsProps and Physics2D are also explored for creating dynamic animations.
What topics are not covered in this course?
The course does not cover the basics of Greensock, as it assumes prior knowledge from the 'Express' and 'Beyond the Basics' courses. It also doesn't focus on server-side programming or backend development, as the emphasis is on front-end animation techniques using Greensock.
How much time should I expect to commit to this course?
The course consists of 87 lessons, and while the exact runtime is not specified, students should expect to commit a significant amount of time to complete the projects and exercises. The projects involve applying creative techniques, which may require additional experimentation and practice outside of the lesson time.
What is the carry-over value of this course to other fields or careers?
The skills gained in this course have significant carry-over value for careers in web development, UI/UX design, and digital media creation. Understanding advanced animation techniques and creative coding can enhance front-end development skills, making students more versatile in designing interactive and visually appealing web applications.