SVG Animation with GreenSock

Learn all about how SVG's can be created in design programs, embedded in your web pages, edited with code, and animated with GreenSock

Lesson Highlights Video

I haven't created a fancy marketing video, but this should give you a solid overview of the course material.

This course is still under development with over 30 lessons and more added weekly.

Below are a few complete lesson videos to help you get a feel for my teaching style.

Animating the Guts of An SVG with GreenSock

SVG viewBox and viewport

SVG Marching Ants

Course curriculum

1. Welcome! Course Status Updated 11/19
1. Animating the Guts of an SVG with GreenSock
2. Style SVG with Attributes and CSS
3. Exploring More Shapes and Line Styles with Boxy SVG
4. SVG Path Element: Bezier Curve Commands
5. SVG Groups and Applying Transforms
6. SVG Text: Using Custom Fonts
7. Understanding transformOrigin and svgOrigin
8. Project: SVG Basic Banner
9. SVG Strokes: linejoin, linecap, and miter-limit
10. Avoiding Weird Glitches with Line Animations
11. Don't Animate tspan Elements
12. Character by Character Animations Part 1: Characters as Paths
13. Character by Character Animation Part 2: Characters as Text
14. SVG Text on Path
15. SVG viewBox and viewport
16. Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares
17. preserveAspectRatio Part 2: Recap and Examples
1. Marching Ants: Intro to dasharray and dashoffset
2. Drawing Animated Lines
3. Using DrawSVG Plugin
4. DrawSVG Mastery
5. Adding Custom Split Points with Boxy SVG
6. Recreating GreenSock.com Jelly Nav
7. Ball on a Wire
8. Line Jumper Basic: Animating Start and End Independently
9. Line Jumper Advanced: Clip Path, Holes and Nesting Animations
1. Introducing SVG Clip Paths
2. Animating SVG Clip Paths
3. Introducing SVG Masks
4. Animating SVG Masks: Reveal and Hide Text
5. SVG Masks: Spotlight Effect
6. Clip and Mask: Feathered Colorize Effect
7. Animating Dashed Strokes
8. Isometric Bar Animation
9. Isometric Bar Animation Part 2: Adding Shadow and Final Touches
1. SVG Filters: Animated Warp
2. SVG Goo FIlter
3. Goo Configurator
4. Introducing SVG Patterns
5. Creating SVG Patterns in Boxy SVG
6. Animating SVG Patterns
7. Animating Multiple Variations of a Template Pattern
1. Introducing MotionPath Plugin
2. Infinite MotionPath Followers
3. Path Followers on a Blob Shape
1. Building the Worst SVG Drawing App
2. Cloning SVG Elements
3. Clonging SVG Groups
4. Creating SVG Elements with Code
5. getBBox() for Creating Dynamic Shapes: part 1 re-usable function
6. getBBox() for Creating Dynamic Shapes Part 2: Fancy Rollover
1. SVG Background Generator (blend modes, gradients, random start time)
2. Scroll-Driven SVG Plant Animation: Overview Creating Artwork
3. Scroll-Driven SVG Plant Animation 2: Coding the Animation
4. Scroll-Driven SVG Plant Animation 3: Adding ScrollTrigger
5. Double Border Animation Part 1: Exploring UI Initiative Logo
6. Double Border Animation Part 2: Building the Animation
7. Double Border Animation Part 3: Masking and Code Optimization
8. Circle Connector Challenge Solutions
9. Wavy Path Followers
10. Plane On A Dashed Path
11. Plane On A Dashed Path with Dynamic Viewbox Animation

About this course

63 lessons
12 hours of video content

Master GreenSock Animation

SVG Animation with GreenSock is included with your Creative Coding Club membership along with GSAP Express, Beyond the Basics, ScrollTrigger Express, and B-sides, Bonuses, and Oddities.

Unlock all my premium GreenSock training and get new lessons weekly.

The Creative Coding Club offers the most comprehensive GreenSock training available.

From basics, to scroll-driven animations, advanced tips and tricks, and SVG animation, you'll learn it all!

Join Today