Today I'm going to give you a quick walk-through of designing a simple banner in Boxy SVG and animating on CodePen with GSAP.

It will be mostly review of things we learned in the previous 6 chapters of SVG Animation with GreenSock, but as always, there are a few new treats thrown in along the way.

Even if you only know the GSAP basics, this video will inspire you to dive into SVG animations!


Topic Review

  • Creating and animating an <ellipse>
  • Using custom fonts
  • Breaking apart text
  • Grouping
  • Animating transforms
  • Setting up our SVG and GSAP code in CodePen


My goal in building this lesson is to inspire you make something simple like this on your own. It doesn't have to take hours. You should be able to have something working in 30 minutes or so. 

You can code along with this starter file.


My Finished Demo


Go Deeper with GreenSock


If you would love to have new web animation lessons and challenges sent to your inbox each week AND also instantly unlock over 200 lessons for all skill levels  check out my  Creative Coding Club course bundle.

I absolutely guarantee you're going to love it. 

Check out my new logo animation!


This was 100% designed in Boxy SVG and animated with GSAP on CodePen.

If you get some joy scrubbing through this animation and say "I want to make animations like this", then my course bundle is for you!

Join Today for $2.95/month


Unlock over 200 Lessons

The most comprehensive GSAP training on the planet

It can be hard to imagine what "over 200" lessons actually means, so I made a complete course list for you.

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. Using the GSAP Documentation
  14. Why Timelines are Important
  15. Basic Timeline Intro
  16. Position Parameter Visualizer
  17. Basic Timeline Position
  18. Timeline Control and Labels
  19. Simple Rollover / Hover Effects
  20. Rollover / Hover Effects for Multiple Elements
  21. Constant Hover Pulse with Smooth Reset
  22. Project Setup
  23. Basic Animation
  24. Timeline Defaults
  25. GSDevTools
  26. Tweak Timing
  27. Remove Flash of Un-styled Content (FOUC)
  28. Typewriter Effect with TextPlugin
  29. Getting Started with SplitText
  30. SplitText Word by Word
  31. SplitText Line by Line
  32. Get Started with ScrollTrigger in 3 Easy Steps
  33. Percentage-Based Keyframes
  34. Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges


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. Tweening function-based values
  18. Ease-based distribution of start times
  19. Using the weightedRandom() helper function
  20. Using the distribute() utility function
  21. Rubberbander Text Effect
  22. Staggered Staggers. What?
  23. 3D Text Rotator
  24. Repeat Values on Tween vs Stagger Object
  25. Using Callbacks in Staggers
  26. Staggered Staggers with No Gap
  27. Intro
  28. Linear Navigation with addPause()
  29. Non-Linear Navigation Using Labels
  30. Add a Pause to a Timeline for a Specific Amount of Time
  31. Nested Timelines
  32. Functions That Return Timelines
  33. tweenTo() and tweenFromTo()
  34. File Setup
  35. Animate Panel 1
  36. Create a function to animate 3 panels
  37. Morph curve using AttrPlugin
  38. TItle Effects Generator Part 1
  39. Title Effects Generator Part 2
  40. Title Effects Generator Part 3: Wrap Up
  41. Refactoring Multiple Timelines Into a Single Tween
  42. Staggered Animations Variations on a Theme


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. Slide-in Panels
  24. Layered Pinning
  25. Layered Pinning from Bottom
  26. SVG Mega Scroll and Follow
  27. Use ScrollTrigger Callbacks to Control HTML5 Video
  28. Scoll-Driven SVG Path Follower
  29. Part 1: File setup, Alternating Rows and ScrollTrigger Basics
  30. Part 2: Offscreen Reset
  31. Part 3: Mobile Layout


SVG Animation with GreenSock

  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. Introducing SVG Clip Paths
  26. Animating SVG Clip Paths
  27. Introducing SVG Masks
  28. Animating SVG Masks: Reveal and Hide Text
  29. SVG Masks: Spotlight Effect
  30. Clip and Mask: Feathered Colorize Effect
  31. Welcome to Programming SVG
  32. Building the Worst SVG Drawing App
  33. SVG Background Generator (blend modes, gradients, random start time)

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. 3D Card Flip Effect (double-sided)
  21. Interactive 3D Card Flip
  22. 3D Card Flip Basic Game
  23. Responsive Hover Nav
  24. Gallery with Burn-in Effect
  25. Image Comparison Tool with Draggable
  26. Gradient Filled Text on Scroll
  27. Intro to ScrambleText Plugin
  28. Staggered Text Effect with ScrambleText
  29. Creating distinct enter and leave animations with a single timeline
  30. Circular Distribution of Elements without much Math
  31. Ferris Wheel: Counter-rotation to keep spinning elements upright
  32. Interactive Peacock with Modern GreenSock
  33. Banner: Clean loops and custom end screens : Part 1 Callbacks
  34. Banner: Clean loops and custom end screens : Part 2 TweenTo()
  35. Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup
  36. Multiline Text Mask Effect Part2: Responsive
  37. Using CSS Clamp for Responsive Text Sizing
  38. Zero-Duration Tweens and set()
  39. Zero-Duration Tweens Part 2: addPause()
  40. Gallery with AutoPlay Part 1: File Setup / Basic Functionality
  41. Gallery with Autoplay Part 2: Toggle Switch
  42. Breaking Free of the Timeline Mindset: Part 1
  43. Breaking Free of the Timeline Mindset Part 2
  44. Breaking Free of the Timeline Mindset Part 3
  45. Creeping and Jumping Dots
  46. Physics Plugins Part 1: PhysicsProps
  47. Physics Plugins Part 2: Physics2D
  48. Rotating Input Dials (SVG)
  49. Challenge: Slime Conveyor Belt
  50. Solution: Slime Conveyor Belt
  51. Constant Loop with Return to Start
  52. Drop Down Descramble Part 1: Technical Exploration
  53. Drop Down Descramble Part 2: Building the Animation
  54. Animating background-size cover and contain
  55. Constant Loop with Return to Start: Part 2: Smart Reverse
  56. Staggered Bars Wipe Transition
  57. Ease-based distribution of start times
  58. GSAP 3 Express Free Trial Ad
  59. Zim Splat
  60. 3D Inverted Cube Spinner
  61. getRelativePosition() Spinner Demo
  62. One Line of Code Mega Demo
  63. Apply a CustomEase to a MotionPath Tween
  64. How I Built my CustomEase Visualizer
  65. Pixi Circulator Beta
  66. Pixi Sweet Corn
  67. Pixi Circles Top and Bottom
  68. Dynamic Text Effect Self Playing
  69. Dynamic Interactive Text Effect

GSAP 3 Special Eases

  1. SlowMo Overview
  2. In Your Face Effect
  3. Whirl-Around Text Effect
  4. RoughEase Overview
  5. Scary Flicker
  6. Shiver
  7. Configure an elastic ease
  8. Steps Ease for Spritesheet Animations
  9. CustomEase Quick Start

Join Creative Coding Club

Unlock the world's most comprehensive GreenSock Animation training.

Get started now