background-fill progress-fill stroke SCRUB ME

All Creative Coding Club Lessons List

Don't click these links just yet!

Once you enroll in Creative Coding Club ALL these lessons will be available at your finger tips.

GSAP 3 Express

  1. Welcome to the course
  2. Our Development Environment
  3. GSAP 3 Express Notes and Instructions
  4. GSAP Object: Tweens and Timelines
  5. Basic Tween
  6. from() and fromTo()
  7. Special Properties: Delay and Repeat
  8. Special Property: Ease
  9. Reading Ease Curves
  10. Special Property: Stagger
  11. Tween Control
  12. Why from() Tweens Glitch and Stop Working!
  13. transformOrigin
  14. Using the GSAP Documentation
  15. Why Timelines are Important
  16. Basic Timeline Intro
  17. Position Parameter Visualizer
  18. Basic Timeline Position
  19. Timeline Control and Labels
  20. Congratulations on Your Progress
  21. Simple Rollover / Hover Effects
  22. Rollover / Hover Effects for Multiple Elements
  23. Constant Hover Pulse with Smooth Reset
  24. Project Setup
  25. Basic Animation
  26. Timeline Defaults
  27. GSDevTools
  28. Tweak Timing
  29. Remove Flash of Un-styled Content (FOUC)
  30. Typewriter Effect with TextPlugin
  31. Getting Started with SplitText
  32. SplitText Word by Word
  33. SplitText Line by Line
  34. Get Started with ScrollTrigger in 3 Easy Steps
  35. Percentage-Based Keyframes
  36. Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges
  37. Hole Jumper Part 1
  38. Hole Jumper Part 2: Finessing the Animation


SVG Animation with GSAP

  1. Welcome! Course Status Updated 11/19
  2. Animating the Guts of an SVG with GreenSock
  3. Style SVG with Attributes and CSS
  4. Exploring More Shapes and Line Styles with Boxy SVG
  5. SVG Path Element: Bezier Curve Commands
  6. SVG Groups and Applying Transforms
  7. SVG Text: Using Custom Fonts
  8. Understanding transformOrigin and svgOrigin
  9. Project: SVG Basic Banner
  10. SVG Strokes: linejoin, linecap, and miter-limit
  11. Avoiding Weird Glitches with Line Animations
  12. Don't Animate tspan Elements
  13. Character by Character Animations Part 1: Characters as Paths
  14. Character by Character Animation Part 2: Characters as Text
  15. SVG Text on Path
  16. SVG viewBox and viewport
  17. Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares
  18. preserveAspectRatio Part 2: Recap and Examples
  19. Marching Ants: Intro to dasharray and dashoffset
  20. Drawing Animated Lines
  21. Using DrawSVG Plugin
  22. DrawSVG Mastery
  23. Adding Custom Split Points with Boxy SVG
  24. Recreating GreenSock.com Jelly Nav
  25. Ball on a Wire
  26. Line Jumper Basic: Animating Start and End Independently
  27. Line Jumper Advanced: Clip Path, Holes and Nesting Animations
  28. Introducing SVG Clip Paths
  29. Animating SVG Clip Paths
  30. Introducing SVG Masks
  31. Animating SVG Masks: Reveal and Hide Text
  32. SVG Masks: Spotlight Effect
  33. Clip and Mask: Feathered Colorize Effect
  34. Animating Dashed Strokes
  35. Isometric Bar Animation
  36. Isometric Bar Animation Part 2: Adding Shadow and Final Touches
  37. Draggable SVG X-Ray Mask
  38. SVG Filters: Animated Warp
  39. SVG Goo FIlter
  40. Goo Configurator
  41. Introducing SVG Patterns
  42. Creating SVG Patterns in Boxy SVG
  43. Animating SVG Patterns
  44. Animating Multiple Variations of a Template Pattern
  45. Introducing MotionPath Plugin
  46. Infinite MotionPath Followers
  47. Path Followers on a Blob Shape
  48. Building the Worst SVG Drawing App
  49. Cloning SVG Elements
  50. Clonging SVG Groups
  51. Creating SVG Elements with Code
  52. getBBox() for Creating Dynamic Shapes: part 1 re-usable function
  53. getBBox() for Creating Dynamic Shapes Part 2: Fancy Rollover
  54. SVG Background Generator (blend modes, gradients, random start time)
  55. Scroll-Driven SVG Plant Animation: Overview Creating Artwork
  56. Scroll-Driven SVG Plant Animation 2: Coding the Animation
  57. Scroll-Driven SVG Plant Animation 3: Adding ScrollTrigger
  58. Double Border Animation Part 1: Exploring UI Initiative Logo
  59. Double Border Animation Part 2: Building the Animation
  60. Double Border Animation Part 3: Masking and Code Optimization
  61. Circle Connector Challenge Solutions
  62. Wavy Path Followers
  63. Plane On A Dashed Path
  64. Plane On A Dashed Path with Dynamic Viewbox Animation
  65. Easy SVG Particles
  66. Dynamic SVG Particles


Beyond the Basics

  1. Chapter Intro
  2. From Illustrator to Animation
  3. Getter-Setter Methods
  4. Smart Play-Pause-Restart Toggle Button
  5. Scrub Through an Animation with an HTML Input Slider
  6. Tween progress() of an Animation
  7. OOPS: Gotta Fix the Buttons
  8. Intro
  9. Callbacks
  10. Build a Timeline Visualizer with getChildren()
  11. killTweensOf()
  12. gsap.utils.wrap()
  13. gsap.registerEffect()
  14. CSSPlugin: Use clearProps to remove inline styles
  15. 3D Transforms
  16. Understanding GSAP's immediateRender Property
  17. GSAP Utils Basics Part 1: mapRange()
  18. GSAP Utils Basics Part 2: mapRange() using mouse-distance-from-center
  19. GSAP Utils Basics Part 3: Chaining utility methods with pipe()
  20. GSAP Utils Part 4: Mouse Scroller with mapRange()
  21. Tweening function-based values
  22. Ease-based distribution of start times
  23. Using the weightedRandom() helper function
  24. Using the distribute() utility function
  25. Rubberbander Text Effect
  26. Staggered Staggers. What?
  27. 3D Text Rotator
  28. Repeat Values on Tween vs Stagger Object
  29. Using Callbacks in Staggers
  30. Staggered Staggers with No Gap
  31. Intro
  32. Linear Navigation with addPause()
  33. Non-Linear Navigation Using Labels
  34. Add a Pause to a Timeline for a Specific Amount of Time
  35. Nested Timelines
  36. Functions That Return Timelines
  37. tweenTo() and tweenFromTo()
  38. File Setup
  39. Animate Panel 1
  40. Create a function to animate 3 panels
  41. Morph curve using AttrPlugin
  42. Title Effects Generator Part 1
  43. Title Effects Generator Part 2
  44. Title Effects Generator Part 3: Wrap Up
  45. Welcome to Special Eases
  46. SlowMo Overview
  47. In Your Face Effect
  48. Whirl-Around Text Effect
  49. RoughEase Overview
  50. Scary Flicker
  51. Shiver
  52. Configure an elastic ease
  53. Steps Ease for Spritesheet Animations
  54. CustomEase Quick Start
  55. Refactoring Multiple Timelines Into a Single Tween
  56. Staggered Animations Variations on a Theme
  57. Text Effect: Bulge Shine


ScrollTrigger Express

  1. Welcome
  2. Get Started in 3 Easy Steps
  3. Scrub and Pin
  4. Pinning and pinSpacing Overview
  5. Pinning Deep Dive
  6. Pin Spacing
  7. Pinning Car Project
  8. Intro to Parallax Scrolling
  9. Aerial SVG Car Parallax
  10. ScrollTriggers for Multiple Sections
  11. Smooth Scrolling with Locomotive Scroll
  12. Prevent Scroll on Fullscreen Intro
  13. Back to Top Link: fastScrollEnd and toggleClass
  14. Change Nav Color on Scroll
  15. Change Nav Color on Scroll: Part 2 Responsive
  16. Scroll-Based Reading Progress Bar
  17. ScrollTo Plugin and ScrollTrigger (Animated Jump Links)
  18. ScrollTrigger Toggle Animations 4 Ways
  19. Responsive Scroll-Driven Line-by-Line Text Effect Part 1
  20. Responsive Scroll-Driven Line-by-Line Text Part 2
  21. Off-Screen Reset
  22. 3D Rolling Headers
  23. 3D Rolling Headers: Multiple Headers and Variations
  24. Scroll-Driven Multi-Colored Line Section Indicators
  25. Slide-in Panels
  26. Layered Pinning
  27. Layered Pinning from Bottom
  28. SVG Mega Scroll and Follow
  29. Use ScrollTrigger Callbacks to Control HTML5 Video
  30. Scoll-Driven SVG Path Follower
  31. Part 1: File setup, Alternating Rows and ScrollTrigger Basics
  32. Part 2: Offscreen Reset
  33. Part 3: Mobile Layout
  34. Introduction: File Setup and Pinning
  35. Basic Staggered Animation
  36. Content Sections with Varying Heights
  37. Responsive Layout
  38. Using gsap.matchMedia()
  39. Horizontal Scroll and Pin Part 1
  40. Horizontal Scroll: Container Animations
  41. Horizontal Scroll Triggering Secondary Animations
  42. Horizontal Scroll: Import SVG Maps and Responsive Issues
  43. Horizontal Scrolling: Fixing Responsive Issues
  44. Horizontal Scrolling: SVG Animation
  45. Part 1: File Setup and Staggered Animation
  46. Adding 3D Layout and Animation
  47. Multiple Headers
  48. Exploring Responsive Issues and Adding ScrollTrigger
  49. Fixing Responsive Issues
  50. Basic Mode
  51. Building a Timeline of Function Calls
  52. Pro Mode
  53. Pro Highlight Mode


B-sides, Bonuses and Oddities

  1. Laziest Response Slider Using repeatRefresh
  2. Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text
  3. Curved motion using different eases for x and y
  4. Reveal dots while animation plays
  5. Constant Speed with Random Motion
  6. Directional Rotation
  7. Bug Race in a Single Tween
  8. Bug Race Complete: Jerk Level and Weighted Random Values
  9. Hacking Ease Curves
  10. Basic Animated Counter using Snap Plugin
  11. Customizable and Re-usable Counter Effect
  12. Auto-close open item // reverse current timeline
  13. Animated Snow using Interpolate
  14. Favorite Mask Effects
  15. Using Clip-Path in a Custom Effect for Multi-directional Wipes
  16. Hard Edge Gradient Animated Fill
  17. Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration
  18. Mask-Up / Scale Down Part 2: optimizations and registerEffect()
  19. Text Mask Effect Using Blend Modes
  20. Advanced Clip-Path: Staggered Corners
  21. Advanced Clip-Path: Angled Wipe and Pendulum Wipe
  22. Advanced Clip-Path: Multi-Bar Wipe
  23. 3D Card Flip Effect (double-sided)
  24. Interactive 3D Card Flip
  25. 3D Card Flip Basic Game
  26. Responsive Hover Nav
  27. Gallery with Burn-in Effect
  28. Image Comparison Tool with Draggable
  29. Gradient Filled Text on Scroll
  30. Intro to ScrambleText Plugin
  31. Staggered Text Effect with ScrambleText
  32. Creating distinct enter and leave animations with a single timeline
  33. Circular Distribution of Elements without much Math
  34. Ferris Wheel: Counter-rotation to keep spinning elements upright
  35. Interactive Peacock with Modern GreenSock
  36. Banner: Clean loops and custom end screens : Part 1 Callbacks
  37. Banner: Clean loops and custom end screens : Part 2 TweenTo()
  38. Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup
  39. Multiline Text Mask Effect Part2: Responsive
  40. Using CSS Clamp for Responsive Text Sizing
  41. Angled ClipPath Text Reveal (plastic.design)
  42. Angled ClipPath Text Reveal: SplitText Double Split and Responsive
  43. Zero-Duration Tweens and set()
  44. Zero-Duration Tweens Part 2: addPause()
  45. Gallery with AutoPlay Part 1: File Setup / Basic Functionality
  46. Gallery with Autoplay Part 2: Toggle Switch
  47. Breaking Free of the Timeline Mindset: Part 1
  48. Breaking Free of the Timeline Mindset Part 2
  49. Breaking Free of the Timeline Mindset Part 3
  50. Creeping and Jumping Dots
  51. Physics Plugins Part 1: PhysicsProps
  52. Physics Plugins Part 2: Physics2D
  53. Rotating Input Dials (SVG)
  54. Challenge: Slime Conveyor Belt
  55. Solution: Slime Conveyor Belt
  56. Constant Loop with Return to Start
  57. Drop Down Descramble Part 1: Technical Exploration
  58. Drop Down Descramble Part 2: Building the Animation
  59. Animating background-size cover and contain
  60. Constant Loop with Return to Start: Part 2: Smart Reverse
  61. Staggered Bars Wipe Transition
  62. HSL Rainbow Spread
  63. Text Around A Cube
  64. Text Around a Cube Part 2: Making it Responsive
  65. Animating Half-Tone Patterns
  66. Animating Half-Tone Patterns on Scroll (inside text)
  67. Half-tone Patters: Advanced Customization
  68. Ease-based distribution of start times
  69. GSAP 3 Express Free Trial Ad
  70. Zim Splat
  71. 3D Inverted Cube Spinner
  72. getRelativePosition() Spinner Demo
  73. One Line of Code Mega Demo
  74. Apply a CustomEase to a MotionPath Tween
  75. How I Built my CustomEase Visualizer
  76. Pixi Circulator Beta
  77. Pixi Sweet Corn
  78. Pixi Circles Top and Bottom
  79. Dynamic Text Effect Self Playing
  80. Dynamic Interactive Text Effect
  81. Starter File Explanation
  82. Challenge Outer Loop
  83. Solution Outer Loop
  84. Challenge Stagger Drop
  85. Solution Stagger Drop
  86. Challenge Box Jumper Level 1
  87. Solution Box Jumper Level 1
  88. Challenge: Off the Cliff Level 1 and Level 2
  89. Solutions: Off The Cliff Level 1 and Level 2
  90. Challenge: Collision
  91. Solution: Collision
  92. Introducing The Variable
  93. The Variable: Button Hotspots
  94. The Variable: Building a Single Stage
  95. The Variable: Building Multiple Stages
  96. The Variable: Combining Stages and Line Morph
  97. The Variable: Full-page Hotspots and Determining Quadrants
  98. The Variable: Full-page Hotspots Highlighting Divs
  99. The Variable: Responsive Full-page Hotspots
  100. The Variable: Integrating Hotspot Code in Project File

YES! All these lessons are waiting for you

I've spent 4 years creating what I believe to be the best and most comprehensive GSAP training for you and now you can see how extensive it is!

Every lesson I've made for you represents something:

  • I wish I knew when I started
  • I struggled with when I first learned about it
  • I know you will need to know
  • I was simply intrigued by and wanted to share with you
  • I think will make you fall more in love with creative coding and GSAP


Want to continue learning with me?