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

About this course

  • 66 lessons
  • 12.5 hours of video content

Purchase SVG Animation with GSAP

Pay one low price for lifetime access to this course and all future updates.

The instructions in this course assume you have beginner knowledge of GSAP's tweens and timelines as explained in our free course: GSAP 3 Express


Regular Price Sale Price
$59 N/A  

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

Full Retail Price: $149