English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 65 Lessons (12h 34m) | 1.66 GB
Learn all about how SVG’s can be created in design programs, embedded in your web pages, edited with code, and animated with GreenSock
Learn how to create SVGs in design programs, embed them in web pages, edit them with 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 SVGs. To animate SVG effectively, you need to understand the key features of markup. SVG is a broad topic, and the goal of the course is to teach you the “useful parts” as quickly as possible and show you interesting animation techniques.
Table of Contents
1 Animating the Guts of an SVG with GreenSock
2 Style SVG with Attributes and CSS
3 Exploring More Shapes and Line Styles with Boxy SVG
4 SVG Path Element Bezier Curve Commands
5 SVG Groups and Applying Transforms
6 SVG Text Using Custom Fonts
7 Understanding transformOrigin and svgOrigin
8 Project SVG Basic Banner
9 SVG Strokes linejoin, linecap, and miter-limit
10 Avoiding Weird Glitches with Line Animations
11 Don’t Animate tspan Elements
12 Character by Character Animations Part 1 Characters as Paths
13 Character by Character Animation Part 2 Characters as Text
14 SVG Text on Path
15 SVG viewBox and viewport
16 Understanding preserveAspectRatio Putting Skinny Rectangles in Squares
17 preserveAspectRatio Part 2 Recap and Examples
18 Marching Ants Intro to dasharray and dashoffset
19 Drawing Animated Lines
20 Using DrawSVG Plugin
21 DrawSVG Mastery
22 Adding Custom Split Points with Boxy SVG
23 Recreating GreenSock.com Jelly Nav
24 Ball on a Wire
25 Line Jumper Basic Animating Start and End Independently
26 Line Jumper Advanced Clip Path, Holes and Nesting Animations
27 Introducing SVG Clip Paths
28 Animating SVG Clip Paths
29 Introducing SVG Masks
30 Animating SVG Masks Reveal and Hide Text
31 SVG Masks Spotlight Effect
32 Clip and Mask Feathered Colorize Effect
33 Animating Dashed Strokes
34 Isometric Bar Animation
35 Isometric Bar Animation Part 2 Adding Shadow and Final Touches
36 Draggable SVG X-Ray Mask
37 SVG Filters Animated Warp
38 SVG Goo FIlter
39 Goo Configurator
40 Introducing SVG Patterns
41 Creating SVG Patterns in Boxy SVG
42 Animating SVG Patterns
43 Animating Multiple Variations of a Template Pattern
44 Introducing MotionPath Plugin
45 Infinite MotionPath Followers
46 Path Followers on a Blob Shape
47 Building the Worst SVG Drawing App
48 Cloning SVG Elements
49 Clonging SVG Groups
50 Creating SVG Elements with Code
51 getBBox() for Creating Dynamic Shapes part 1 re-usable function
52 getBBox() for Creating Dynamic Shapes Part 2 Fancy Rollover
53 SVG Background Generator (blend modes, gradients, random start time)
54 Scroll-Driven SVG Plant Animation Overview Creating Artwork
55 Scroll-Driven SVG Plant Animation 2 Coding the Animation
56 Scroll-Driven SVG Plant Animation 3 Adding ScrollTrigger
57 Double Border Animation Part 1 Exploring UI Initiative Logo
58 Double Border Animation Part 2 Building the Animation
59 Double Border Animation Part 3 Masking and Code Optimization
60 Circle Connector Challenge Solutions
61 Wavy Path Followers
62 Plane On A Dashed Path
63 Plane On A Dashed Path with Dynamic Viewbox Animation
64 Easy SVG Particles
65 Dynamic SVG Particles
Resolve the captcha to access the links!