Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
SVG Animation with GSAP
Rating: 4.9 out of 5(6 ratings)
69 students

SVG Animation with GSAP

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

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

    1. Compare vector and bitmap images

    2. Look inside an <svg> at its guts

    3. Using inline <svg> as opposed to other methods

    4. Explore the <circle> element

    5. Animate a <circle>'s attributes

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

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.

Report abuse