CourseFlix

SVG Animation with GreenSock

12h 34m 48s
English
Paid

Learn how to draw and animate SVG graphics with simple tools and clear markup. You will place SVGs on a page, edit their code, and build smooth GreenSock animations.

This course is for frontend developers who know basic GreenSock but want more SVG skill. You will learn the key SVG tags and attributes you use in real projects. SVG is a big topic, so we focus on the parts that help you build clean and useful animations fast.

About the Author: Creative Coding Club

Creative Coding Club thumbnail

Creative Coding Club is a creative-technology teaching platform run by Carl Andersen, focused on the creative and visual side of programming — generative art, p5.js / Processing, Three.js, shader programming, and the WebGL / GLSL toolchain that sits underneath modern browser graphics work.

The CourseFlix listing carries four Creative Coding Club courses on generative art, creative coding fundamentals, and the visual programming patterns that bridge design and code. Material is paid and aimed at designers and developers building creative-technology work rather than business applications.

Watch Online 65 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 65 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Animating the Guts of an SVG with GreenSock
All Course Lessons (65)
#Lesson TitleDurationAccess
1
Animating the Guts of an SVG with GreenSock Demo
10:15
2
Style SVG with Attributes and CSS
10:20
3
Exploring More Shapes and Line Styles with Boxy SVG
11:21
4
SVG Path Element: Bezier Curve Commands
11:53
5
SVG Groups and Applying Transforms
12:05
6
SVG Text: Using Custom Fonts
13:56
7
Understanding transformOrigin and svgOrigin
09:25
8
Project: SVG Basic Banner
11:55
9
SVG Strokes: linejoin, linecap, and miter-limit
09:22
10
Avoiding Weird Glitches with Line Animations
16:27
11
Don't Animate tspan Elements
14:24
12
Character by Character Animations Part 1: Characters as Paths
11:09
13
Character by Character Animation Part 2: Characters as Text
07:13
14
SVG Text on Path
09:41
15
SVG viewBox and viewport
10:27
16
Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares
22:13
17
preserveAspectRatio Part 2: Recap and Examples
16:32
18
Marching Ants: Intro to dasharray and dashoffset
08:45
19
Drawing Animated Lines
07:39
20
Using DrawSVG Plugin
13:06
21
DrawSVG Mastery
10:53
22
Adding Custom Split Points with Boxy SVG
11:49
23
Recreating GreenSock.com Jelly Nav
08:34
24
Ball on a Wire
12:23
25
Line Jumper Basic: Animating Start and End Independently
18:47
26
Line Jumper Advanced: Clip Path, Holes and Nesting Animations
13:55
27
Introducing SVG Clip Paths
11:43
28
Animating SVG Clip Paths
12:47
29
Introducing SVG Masks
12:31
30
Animating SVG Masks: Reveal and Hide Text
12:48
31
SVG Masks: Spotlight Effect
09:54
32
Clip and Mask: Feathered Colorize Effect
08:20
33
Animating Dashed Strokes
07:15
34
Isometric Bar Animation
10:22
35
Isometric Bar Animation Part 2: Adding Shadow and Final Touches
09:35
36
Draggable SVG X-Ray Mask
07:56
37
SVG Filters: Animated Warp
14:52
38
SVG Goo FIlter
10:01
39
Goo Configurator
11:50
40
Introducing SVG Patterns
11:50
41
Creating SVG Patterns in Boxy SVG
05:27
42
Animating SVG Patterns
10:52
43
Animating Multiple Variations of a Template Pattern
07:29
44
Introducing MotionPath Plugin
09:35
45
Infinite MotionPath Followers
11:52
46
Path Followers on a Blob Shape
13:32
47
Building the Worst SVG Drawing App
08:03
48
Cloning SVG Elements
09:08
49
Clonging SVG Groups
14:14
50
Creating SVG Elements with Code
09:20
51
getBBox() for Creating Dynamic Shapes: part 1 re-usable function
11:37
52
getBBox() for Creating Dynamic Shapes Part 2: Fancy Rollover
09:24
53
SVG Background Generator (blend modes, gradients, random start time)
16:39
54
Scroll-Driven SVG Plant Animation: Overview Creating Artwork
16:06
55
Scroll-Driven SVG Plant Animation 2: Coding the Animation
07:36
56
Scroll-Driven SVG Plant Animation 3: Adding ScrollTrigger
13:41
57
Double Border Animation Part 1: Exploring UI Initiative Logo
11:44
58
Double Border Animation Part 2: Building the Animation
14:59
59
Double Border Animation Part 3: Masking and Code Optimization
10:15
60
Circle Connector Challenge Solutions
17:39
61
Wavy Path Followers
15:31
62
Plane On A Dashed Path
08:52
63
Plane On A Dashed Path with Dynamic Viewbox Animation
08:54
64
Easy SVG Particles
14:27
65
Dynamic SVG Particles
11:39
Unlock unlimited learning

Get instant access to all 64 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

65 lessons · 12h 34m 48s
Show all 65 lessons
  1. 1 Animating the Guts of an SVG with GreenSock 10:15
  2. 2 Style SVG with Attributes and CSS 10:20
  3. 3 Exploring More Shapes and Line Styles with Boxy SVG 11:21
  4. 4 SVG Path Element: Bezier Curve Commands 11:53
  5. 5 SVG Groups and Applying Transforms 12:05
  6. 6 SVG Text: Using Custom Fonts 13:56
  7. 7 Understanding transformOrigin and svgOrigin 09:25
  8. 8 Project: SVG Basic Banner 11:55
  9. 9 SVG Strokes: linejoin, linecap, and miter-limit 09:22
  10. 10 Avoiding Weird Glitches with Line Animations 16:27
  11. 11 Don't Animate tspan Elements 14:24
  12. 12 Character by Character Animations Part 1: Characters as Paths 11:09
  13. 13 Character by Character Animation Part 2: Characters as Text 07:13
  14. 14 SVG Text on Path 09:41
  15. 15 SVG viewBox and viewport 10:27
  16. 16 Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares 22:13
  17. 17 preserveAspectRatio Part 2: Recap and Examples 16:32
  18. 18 Marching Ants: Intro to dasharray and dashoffset 08:45
  19. 19 Drawing Animated Lines 07:39
  20. 20 Using DrawSVG Plugin 13:06
  21. 21 DrawSVG Mastery 10:53
  22. 22 Adding Custom Split Points with Boxy SVG 11:49
  23. 23 Recreating GreenSock.com Jelly Nav 08:34
  24. 24 Ball on a Wire 12:23
  25. 25 Line Jumper Basic: Animating Start and End Independently 18:47
  26. 26 Line Jumper Advanced: Clip Path, Holes and Nesting Animations 13:55
  27. 27 Introducing SVG Clip Paths 11:43
  28. 28 Animating SVG Clip Paths 12:47
  29. 29 Introducing SVG Masks 12:31
  30. 30 Animating SVG Masks: Reveal and Hide Text 12:48
  31. 31 SVG Masks: Spotlight Effect 09:54
  32. 32 Clip and Mask: Feathered Colorize Effect 08:20
  33. 33 Animating Dashed Strokes 07:15
  34. 34 Isometric Bar Animation 10:22
  35. 35 Isometric Bar Animation Part 2: Adding Shadow and Final Touches 09:35
  36. 36 Draggable SVG X-Ray Mask 07:56
  37. 37 SVG Filters: Animated Warp 14:52
  38. 38 SVG Goo FIlter 10:01
  39. 39 Goo Configurator 11:50
  40. 40 Introducing SVG Patterns 11:50
  41. 41 Creating SVG Patterns in Boxy SVG 05:27
  42. 42 Animating SVG Patterns 10:52
  43. 43 Animating Multiple Variations of a Template Pattern 07:29
  44. 44 Introducing MotionPath Plugin 09:35
  45. 45 Infinite MotionPath Followers 11:52
  46. 46 Path Followers on a Blob Shape 13:32
  47. 47 Building the Worst SVG Drawing App 08:03
  48. 48 Cloning SVG Elements 09:08
  49. 49 Clonging SVG Groups 14:14
  50. 50 Creating SVG Elements with Code 09:20
  51. 51 getBBox() for Creating Dynamic Shapes: part 1 re-usable function 11:37
  52. 52 getBBox() for Creating Dynamic Shapes Part 2: Fancy Rollover 09:24
  53. 53 SVG Background Generator (blend modes, gradients, random start time) 16:39
  54. 54 Scroll-Driven SVG Plant Animation: Overview Creating Artwork 16:06
  55. 55 Scroll-Driven SVG Plant Animation 2: Coding the Animation 07:36
  56. 56 Scroll-Driven SVG Plant Animation 3: Adding ScrollTrigger 13:41
  57. 57 Double Border Animation Part 1: Exploring UI Initiative Logo 11:44
  58. 58 Double Border Animation Part 2: Building the Animation 14:59
  59. 59 Double Border Animation Part 3: Masking and Code Optimization 10:15
  60. 60 Circle Connector Challenge Solutions 17:39
  61. 61 Wavy Path Followers 15:31
  62. 62 Plane On A Dashed Path 08:52
  63. 63 Plane On A Dashed Path with Dynamic Viewbox Animation 08:54
  64. 64 Easy SVG Particles 14:27
  65. 65 Dynamic SVG Particles 11:39

Related courses

  • GSAP3: Beyond the Basics thumbnailUpdated 2y ago

    GSAP3: Beyond the Basics

    By: Creative Coding Club
    Ready to take your GSAP3 skills to the next level? In this course, I'll show you my favorite GSAP3 features that you absolutely need to know to discover new.
    8 hours 25 minutes 41 seconds
  • Whimsical Animations thumbnailUpdated 5mo ago

    Whimsical Animations

    By: Josh Comeau
    Whimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user.
    5 hours 7 minutes 31 seconds
  • Web Animations Full Course | Build a GTA VI Website & Master GSAP thumbnailUpdated 10mo ago

    Web Animations Full Course | Build a GTA VI Website & Master GSAP

    By: JavaScript Mastery, Adrian Hajdin
    More than 70% of leading design-oriented companies use GSAP in production. Now you will not only be able to understand their approach, but you will.
    3 hours 31 minutes 47 seconds

Frequently asked questions

What is SVG Animation with GreenSock about?
Learn how to draw and animate SVG graphics with simple tools and clear markup. You will place SVGs on a page, edit their code, and build smooth GreenSock animations. This course is for frontend developers who know basic GreenSock but want…
Who teaches SVG Animation with GreenSock?
SVG Animation with GreenSock is taught by Creative Coding Club. You can find more courses by this instructor on the corresponding source page.
How long is SVG Animation with GreenSock?
SVG Animation with GreenSock contains 65 lessons with a total runtime of 12 hours 34 minutes. All lessons are available to watch online at your own pace.
Is SVG Animation with GreenSock free to watch?
SVG Animation with GreenSock is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch SVG Animation with GreenSock online?
SVG Animation with GreenSock is available to watch online on CourseFlix at https://courseflix.net/course/svg-animation-with-greensock. The page hosts every lesson with the integrated video player; no download is required.