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
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
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.