Advanced SVG Animation

Advanced SVG Animation

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2h 56m | 688 MB

This course will teach you how to make resolution-independent, scalable, and complex animations for a myriad of use cases across the web with SVG.

SVGs are resolution-independent, scalable for responsive layouts, and easy to navigate with their navigable DOM. This course, Advanced SVG Animation, teaches you how to use this robust graphic format. By the end of this course, you’ll have the knowledge necessary to make complex animations for a myriad of use cases across the web.

Table of Contents

SVG Overview
1 SVG Introduction
2 Platonic Shapes
3 Paths and Groups

Optimization, CSS Animation, and SVG DOM
4 Optimization and CSS Animations
5 Exercise 1

SVG Sprites
6 Step Animations and Rolling Backgrounds
7 Responsive Sprites
8 Atmospheric and Elemental Motion

Performance
9 Benchmarks
10 CSS Properties

Greensock
11 Greensock Workflow
12 Greensock Syntax
13 Staggering Animations
14 Timelines
15 Exercise 3
16 Illustrator Workflow

UI_UX Animation vs. Standalone
17 UI_UX Animation Overview
18 Animation with Interaction
19 Draggable Animations

DrawSVG and Motion Along a Path
20 DrawSVG
21 Motion Along a Path

Animating Text and Relative Color Values
22 SplitText Plugin
23 Relative Tweens
24 Exercise 5

MorphSVG
25 MorphSVG
26 Exercise 6
27 Storyboarding Animations
28 Resources and Course Wrap-up