SVG Animation with GSAP

Name: SVG Animation with GSAP
Rating: 4.7 (7 reviews)

Bring your SVG Artwork to life with GSAP (GreenSock Animation) and get the most out of creative coding.

Created bycarl schooff

Last updated 12/2025

English

English [Auto],

What you'll learn

Create SVG artwork using beginner-friendly, free online software.
Learn the foundational elements of SVG (paths, strokes, masks, clip paths, gradients, etc) and how to create and edit them
Bring SVG to life by animating them with GSAP's powerful scripted animation tools.
Manipulate and dynamically generate SVG elements with basic JavaScript commands

Course content

7 sections • 68 lectures • 12h 48m total length

Introduction0:55
Animating the Guts of An SVG with GSAP10:14
Welcome to the first lesson in this course.
I'm going to give you a quick comparison of vector (svg) and bitmap (png, gif, jpg) images before we get to our first svg animations!
One of the best features of <svg> is that we have full access to all the source code which is mostly human readable.
I'll show you how SVG images are composed of shapes and paths which I refer to as the "guts" of the image.
These guts contain LOTS of numbers which GSAP LOVES to animate.

Lesson Highlights
Compare vector and bitmap images
Look inside an <svg> at its guts
Using inline <svg> as opposed to other methods
Explore the <circle> element
Animate a <circle>'s attributes
Animate a <circle> using css transforms
Style SVG with Attributes and CSS10:19
Exploring More Shapes and Line Styles with Boxy SVG11:20
SVG Path Element: Bezier Curve Commands11:51
Explore the svg path element and animate the d attribute using quadratic and cubic bezier curves, mastering start and end points, control points, and path commands for expressive svg animations.
SVG Groups and Applying Transforms12:04
SVG Text: Using Custom Fonts13:55
Project: SVG Basic Banner11:54
Understanding transformOrigin and svgOrigin9:24
SVG Strokes: linejoin, linecap, and miter-limit9:21
Avoiding Weird Glitches with Line Animations16:26
Learn to avoid glitches in svg line animations with gsap by aligning points, adjusting line joins, and using precision snapping to create smooth, reliable morphs.
Don't Animate tspan Elements14:23
Character by Character Animations Part 1: Characters as Paths11:08
Character by Character Animation Part 2: Characters as Text7:12
Explore character-by-character text effects in SVG by creating individual text elements for each character and aligning them for a GSAP animation, including font loading and transform origin challenges.
SVG Text on Path9:40
SVG viewBox and viewport10:26
Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares22:12
preserveAspectRatio Part 2: Recap and Examples16:31

Marching Ants: Intro to dasharray and dashoffset8:44
Explore how to create marching ants by animating SVG stroke dasharray and dashoffset with GSAP, applying it to lines, rectangles, and more shapes.
Drawing Animated Lines7:38
Learn to animate SVG strokes with dasharray and dashoffset using GSAP, drawing and erasing lines, rectangles, and curved paths by using get total length to set dash values.
Using DrawSVGPlugin13:05
Learn to animate svg strokes with gsap and the draw svg plugin, using start/end values and staggered tweens for complex plane drawings.
DrawSVG Mastery10:52
Learn to master the DrawSVG plugin to animate strokes, wrapping SVG paths from any start to end state, including center-based drawing and coordinated start and end values.
Adding Custom Split Points11:48
Recreating GSAP Jelly Nav8:33
Ball on a Wire12:22
Line Jumper Basic: Animating Start and End Independently18:46
Line Jumper Advanced: Clip Path, Holes and Nested Animations13:54
Create advanced svg line jumpers with clip paths, holes, and nested gsap timelines. Clip strokes, convert to paths, and animate multiple holes in sequence.

Introducing SVG Clip Paths11:42
Animating SVG Clip Paths12:46
Explore animating svg clip paths with gsap, from tweening the clipping ellipse to animating the clipped image, using inline and external css approaches.
Animating SVG Masks12:30
SVG Mask Spotlight Effect9:53
Clip and Mask: Feathered Color Effect8:19
Combine masking and clipping in svg to create a feathered colorization that reveals a color car over a grayscale image, using a gradient mask and greensock timelines.
Animating Dashed Strokes7:14
Isometric Bar Animation10:21
Isometric Bar Animation Part 2: Shadows and Final Touches9:34
Draggable SVG X-Ray Mask7:55

SVG Filters: Animated Warp14:51
Learn to create and animate a custom SVG warp filter with filter primitives, turbulence base frequency, and displacement map scale, then apply the effect to SVG and HTML.
SVG Goo Filter10:00
GOO Configurator11:49
Introducing SVG Patterns11:49
Master hand-coding SVG patterns, setting coordinates, dimensions, and viewbox for fills. Understand pattern units, x and y offsets, and how to reference and animate patterns.
Creating SVG Patterns in Boxy SVG5:26
Animating SVG Patterns10:51
Learn to animate SVG patterns using GSAP to manipulate individual pattern elements and apply pattern transforms with rotate, scale, and translate, creating seamless looping effects across rectangles.
Animating Multiple Variations of a Template Pattern7:28
Learn to hand-code template patterns in Boxy SVG, apply variations with unique transforms, and animate them across multiple elements using simple pattern transforms instead of matrices.

Building the Worst SVG Drawing App8:02
Cloning SVG Elements9:07
Cloning SVG Groups14:13
Clone SVG groups with GSAP using the deep clone option and getBBox to center clones on click, while assigning unique IDs and animating the results.
Creating SVG Elements with Code9:19
dynamically create SVG elements with code using createElementNS and namespaces, set attributes, and render circles without cloning to understand XML namespaces and proper SVG element creation.
getBBox() for Creating Dynamic Shapes: Part 111:36
getBBox() for Creating Dynamic Shapes: Part 29:23
Use getBBox to generate rounded-rectangle outlines behind each tool, then animate a hover reveal with gsap by fading the box's opacity from 0 to 1 and back on leave.

SVG Background Generator16:38
Scroll-Driven SVG Plant Animation: Artwork16:05
Scroll-Driven SVG Plant Animation: Animation7:35
Scroll-Driven SVG Plant Animation: ScrollTrigger13:40
Double Border Animation: UI Initiative Exploration11:43
Double Border Animation: Animation14:58
Learn to build a double-border svg animation with gsap, drawing each rectangle’s stroke using drawsvg, overlaying white and red borders to reveal a gradient through nested timelines.
Double Border Animation: Masking10:14
Circle Connector Challenge Solutions17:38
Explore diverse SVG animation techniques for the circle connector challenge, including stroke dash offset, masks, gradient masking, Lottie Lab, and a div-based approach.
Wavy Path Followers15:30
Plane on a Dashed Path8:51
Plane on a Dashed Path: viewBox Animation8:53
Easy SVG Particles14:26
Dynamic SVG Particles11:38
Ease Visualizer with MorphSVG and CustomEase4:17
Build a live gsap ease visualizer from a simple svg path, load custom easing, and morph the path with the morph SVG plugin to animate between eases.

Requirements

Understanding of basic web development concepts: HTML, CSS, JavaScript. Basic understanding of GSAP tweens and timelines.

Description

This course provides a comprehensive and technical deep dive into the world of SVG animation. Scalable Vector Graphics (SVG) are lightweight, super sharp at any size, and loads of fun to animate with GSAP!

Throughout the course we will explore the building blocks of SVG (circles, rectangles, strokes, masks, clip paths, gradients, filters) and explore creative ways of animating them with code.

We will use Boxy SVG (free online svg editor) to create SVG. The beauty of Boxy SVG is that as we draw our shapes we can see exactly how they are represented with coe.

Using CodePen (free online code editor) we will learn how to use basic GSAP commands to animate all the different parts of SVG graphics.

Once we have covered the basics we will also use JavaScript to dynamically generate SVG elements which opens the door for particle effects and more robust interactive experiences.

This course assumes prior knowledge of GSAP basics (hand-coding tweens and timelines) and beginner level knowledge of JavaScript (functions, variables, arrays, loops).

Anyone who considers themselves a Junior Developer or looking to get their first webdev job would be a great fit as well as more seasoned developers who want to hand-craft their own SVG animations.

If you want to wear the badge of "Creative Developer" this course is for you!

Who this course is for:

People who are interested in creative coding and adding light-weight, scalable and fun animations to their web projects.

SVG Animation with GSAP

What you'll learn

Explore related topics

Course content

SVG Basics18 lectures • 3hr 29min

SVG Stroke Tricks9 lectures • 1hr 46min

Clipping and Masking9 lectures • 1hr 30min

SVG Filters and Patterns7 lectures • 1hr 12min

MotionPath Plugin and MorphSVG Plugin5 lectures • 57min

Programming SVG6 lectures • 1hr 2min

Small Projects14 lectures • 2hr 52min

Requirements

Description

Who this course is for: