SVG Animation with GreenSock

12h 34m 48s
English
Paid

Course description

Learn how to create SVGs in design programs, embed them in web pages, edit them using code, and animate them with GreenSock.

This course is designed for frontend developers who are familiar with the basics of GreenSock but know little about SVG. To effectively animate SVG, it is necessary to understand the key features of the <svg> markup. SVG is a vast subject, and the goal of the course is to teach you the "useful parts" as quickly as possible and show interesting animation techniques.

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Animating the web with Framer Motion

Animating the web with Framer Motion

Sources: Jeroen Reumkens
Making smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through ev
6 hours 3 minutes 51 seconds
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
The Ultimate Web Scraping Course

The Ultimate Web Scraping Course

Sources: Adrian Horning (The Web Scraping Guy)
I have been earning a living through web scraping for over 3 years, have made over $125,000, have more than 25,000 followers on social media, and in this...
10 hours 33 minutes 19 seconds
Content Sites with Astro and Vue.js

Content Sites with Astro and Vue.js

Sources: vueschool.io
Do you want to create a fast and efficient website with content? In this course, you will learn how to use Astro and Vue.js together for developing high...
1 hour 3 minutes 38 seconds