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

Watch Online SVG Animation with GreenSock

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

Remix Bootcamp: Zero to Mastery

Remix Bootcamp: Zero to Mastery

Sources: zerotomastery.io
Join Remix Bootcamp to master full-stack web development. Learn from industry experts to build better websites and advance your career in web development
21 hours 2 minutes 22 seconds
Software Essentialist

Software Essentialist

Sources: Khalil Stemmler
Learn to write scalable, testable TypeScript and Master the 12 Essentials of design, architecture & testing from first principles.
34 hours 6 minutes 47 seconds
Serverless Handbook for frontend engineers

Serverless Handbook for frontend engineers

Sources: Swizec Teller
Serverless Handbook is a book for frontend developers that provides a detailed explanation of serverless architecture. Over 360 pages, it covers topics such as.
SolidJS: The Complete Guide

SolidJS: The Complete Guide

Sources: Sinan Polat
This book is the result of two years of meticulous work. SolidJS may seem simple at first glance, but its internal structure includes complex...
UI Architecture Academy

UI Architecture Academy

Sources: Logic Room
"Academy of UI Architecture" is a 12-module program that will teach you how to develop, test, and scale user interfaces. During the course, students undergo...
21 hours 37 minutes 23 seconds