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