Education

SVG Animation with GSAP

A hands-on deep dive into SVG animation using GSAP — from core SVG fundamentals to advanced effects like masks, clip paths, motion paths, filters, and scroll-driven interactions. Learn to build production-ready animations, master SVG text and paths, and create complex, performant visuals through real-world projects and experiments.

Dec 10, 2025 - 21:03

Dec 23, 2025 - 13:35

0 233

https://vk.com/doc1040652818_688477202

What will you learn in this online course?

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

Download

SVG Animation with GSAP

What will you learn in this online course?

Tags:

What's Your Reaction?

Related Posts

·

Follow Us

Popular Posts