CF

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

Related courses

Frequently asked questions

What prior knowledge do I need before taking this course?
This course is designed for frontend developers who have a basic understanding of GreenSock. Familiarity with HTML and CSS is also recommended, as the course involves editing SVG code and styling SVGs with CSS.
What projects will I build during the course?
Throughout the course, you'll work on various projects such as the SVG Basic Banner, recreating the GreenSock.com Jelly Nav, and a Scroll-Driven SVG Plant Animation. These projects will help solidify your understanding of animating SVG graphics using GreenSock.
Who is the target audience for this course?
The course is intended for frontend developers who are already acquainted with GreenSock and wish to enhance their skills in SVG animation. It is particularly beneficial for those seeking to create clean and efficient animations quickly.
What specific tools or platforms will be used in the course?
The course uses GreenSock for animations and Boxy SVG for creating and exploring shapes and line styles. Additionally, the DrawSVG Plugin and MotionPath Plugin are used for specific animation techniques.
What topics are not covered in this course?
The course focuses on SVG animations with GreenSock and does not cover unrelated SVG topics such as accessibility, responsiveness, or server-side rendering of SVGs. It also doesn't delve into JavaScript frameworks outside of GreenSock.
How much time will I need to complete this course?
While the total runtime of the course lessons is not specified, the course contains 65 lessons. Prospective students should expect to dedicate a significant amount of time to complete all lessons and projects, taking into account practice and application of the concepts taught.
How can the skills from this course be applied to a career?
Skills acquired from this course can be highly beneficial in a web development career, especially for roles focusing on frontend development and UI/UX design. Proficiency in SVG and GreenSock animations can enhance website interactivity and visual appeal, valuable in creating engaging user experiences.