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
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Animating the Guts of an SVG with GreenSock | 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 |
Comments
0 commentsSimilar courses
GSAP3: Beyond the Basics
Sources: Carl (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 in order to...
8 hours 25 minutes 41 seconds
UI Architecture Academy. Q&A Calls
Sources: Logic Room
A series of group coaching sessions, guidance from a coach, answers to questions, and support throughout the course "Academy of UI Architecture."
20 hours 50 minutes 44 seconds
Scaling Web App Configuration with Environment Variables
Sources: fullstack.io
This course examines in detail the use of the dotenv module for working with environment variables in JavaScript. You will learn to create nine different...
1 hour 53 minutes 25 seconds
Build Modern Websites with Astro!
Sources: James Q Quick
In this course, you will be able to take your blog to the next level by adding powerful features such as tags, pagination, authentication, comments...
7 hours 28 minutes 32 seconds
Want to join the conversation?
Sign in to comment