Advanced SVG Animation

By Sarah Drasner
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.
Course info
Rating
(12)
Level
Intermediate
Updated
Mar 26, 2018
Duration
2h 56m
Table of contents
SVG Overview
SVG Introduction 6m Platonic Shapes 4m Paths and Groups 8m
Optimization, CSS Animation, and SVG DOM
Optimization and CSS Animations 9m Exercise 1 2m
SVG Sprites
Step Animations and Rolling Backgrounds 10m Responsive Sprites 12m Atmospheric and Elemental Motion 6m
Performance
Benchmarks 13m CSS Properties 3m
Greensock
Greensock Workflow 9m Greensock Syntax 6m Staggering Animations 3m Timelines 11m Exercise 3 1m Illustrator Workflow 6m
UI/UX Animation vs. Standalone
UI/UX Animation Overview 10m Animation with Interaction 9m Draggable Animations 9m
DrawSVG and Motion Along a Path
DrawSVG 3m Motion Along a Path 5m
Animating Text and Relative Color Values
SplitText Plugin 4m Relative Tweens 4m Exercise 5 1m
MorphSVG
MorphSVG 10m Exercise 6 0m Storyboarding Animations 6m Resources and Course Wrap-up 4m
Description
Course info
Rating
(12)
Level
Intermediate
Updated
Mar 26, 2018
Duration
2h 56m
Description

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.

About the author
Sarah Drasner
About the author

Sarah is an award-winning Speaker, Senior Developer Advocate at Microsoft, and Staff Writer at CSS-Tricks. She is also the co-founder of Web Animation Workshops, with Val Head.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT