SVG Animation with GSAP

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

With only a basic understanding of GSAP's tweens and timelines, you'll do great with this course as a stand-alone purchase.

GET FULL GSAP COURSE BUNDLE

Lesson Highlights Video

Take a look at what's new in this comprehensive SVG animation course.

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 Text On Path

Course curriculum

1. Welcome! Course Status Updated 10/15/2024
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
10. Draggable SVG X-Ray Mask
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. Introducing MorphSVG
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
12. Easy SVG Particles
13. Dynamic SVG Particles
14. Ease Visualizer with MorphSVG and CustomEase

About this course

68 lessons
13 hours of video content

Purchase Complete GSAP Course Bundle

Unlock the most comprehensive GSAP training available.

This course bundle has over 250 lessons covering: GSAP basics, advanced sequencing, bonus plugins, svg animations, responsive animations, scroll-driven animations and so much more.

Bundle Includes These Courses

If you want to learn GSAP, I'm convinced this training is the BEST way to start. I want to help every developer discover the joy of animating with code!

Full Retail Value: $249

GSAP FOR EVERYONE

Don't miss this special sale event

For many years, GSAP was funded through premium memberships which gave users access to special "bonus plugins" and a commercial license that allowed you to use GSAP in products you sold to multiple people.

These GSAP memberships cost upwards of $100 per year.

As of April 30th, 2025 those memberships no longer exist and the ENTIRETY of GSAP is free to use for everyone.

Let's Celebrate Together!

I'm doing a special sale to celebrate so that everyone can become better at coding animations and avoid ALL the common pitfalls new users face.

I've spent over 4 years creating what I believe to be "Essential GSAP Training".

My course bundle contains knowledge gained from working with GSAP for nearly 2 decades.

For nearly 7 of those years I worked at GreenSock creating all their learning material, writing the documentation, creating demos, recording training videos and answering literally thousands of questions in the forums.

These videos represent literally 10's of thousands of hours worth of professional experience working with GSAP.

I go beyond "pretty effects" and aim to teach you the fundamentals in the most straight-forward and practical manner possible.

I know what it's like to be a beginner struggling with a new API, so my focus in on making everything easy and accessible.

Although each of these courses could sell for over $100 each, I'm giving them all away for one price of $49.

There is MASSIVE demand in the market for quality GSAP training and I'm confident that with the increased volume this can be a win for everyone.

My Dream Fulfilled

My dream from day one was to help as many people as possible discover the joy of animating with GSAP.

By lowering the barrier to entry with this super-low price I'm confident I can ccome much closer to fulfilling that dream.

I hope to see you in the club!

Carl

Enroll in my Essential GSAP Training Today