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
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.
Welcome! Course Status Updated 11/19
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.com Jelly Nav
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
Building the Worst SVG Drawing App
Cloning SVG Elements
Clonging SVG Groups
SVG Background Generator (blend modes, gradients, random start time)
SVG Animation with GreenSock is included with your Creative Coding Club membership along with 5 other GSAP courses.
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!
Monthly and Lifetime plans available.