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