SVG Animations. From Common UX Implementations to Complex Responsive Animation

243 Pages·2017·26.71 MB·English

by  Sarah Drasner

S VG
Animations
FROM COMMON UX IMPLEMENTATIONS TO
COMPLEX RESPONSIVE ANIMATION
Sarah Drasner

Praise for SVG Animations
Few people are as passionate about animation on the web as Sarah, and her new book is a
treasure trove of knowledge. If you want to animate SVG on the web, you simply must
read this book.
—Jack Doyle, GreenSock
“I find Sarah Drasner’s animations a delight to see—expressive, fluid, and graceful. But
not only is she a superb animator, she can also explain exactly why and how to use the
tools at your disposal to create the animations you desire. Her cogent and lucid prose
guides you through the concepts you will need to understand, and she recommends the
best libraries to use for robust, cross-browser development. Even if you think you know
SVG and animation inside-out, you will not regret owning this essential book.”
—Chris Lilley, inventor of SVG
“SVG Animations is a must-read for anyone working with SVG. Sarah Drasner has put all
the most useful things she knows about animating SVG in one place, showing you how to
make good design decisions around animation and
how to pull it off with expert technical skill.”
—Val Head, author of Designing Interface Animation
“Sarah Drasner is both an incredibly artistic animator and a pragmatic, detail-oriented
web developer. SVG Animations provides practical solutions for animating vector
graphics on the web, using the tools available today, without letting technical limitations
cramp your creativity.”
—Amelia Bellamy-Royds, coauthor of SVG Colors, Patterns &
Gradients, SVG Essentials (second edition), SVG Text Layout,
and Using SVG with CSS3 and HTML5 (O’Reilly)

SVG Animations
From Common UX Implementations to
Complex Responsive Animation
Sarah Drasner
BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo
SVG Animations
by Sarah Drasner
Copyright © 2017 Sarah Drasner. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐
tutional sales department: 800-998-9938 or [e-mail].
Editor: Meg Foley Indexer: Wendy Catalano
Production Editor: Shiny Kalapurakkel Interior Designer: David Futato
Copyeditor: Molly Ives Brower Cover Designer: Karen Montgomery
Proofreader: Rachel Head Illustrator: Rebecca Demarest
April 2017: First Edition
Revision History for the First Edition
2017-03-16: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491939703 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. SVG Animations, the cover image, and
related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the author disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.
978-1-491-93970-3
[LSI]
This book is dedicated to Dizzy, my spappem.

Table of Contents
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
1. The Anatomy of an SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
SVG DOM Syntax 2
viewBox and preserveAspectRatio 2
Drawing Shapes 4
Responsive SVG, Grouping, and Drawing Paths 5
SVG on Export, Recommendations, and Optimization 9
Reduce Path Points 11
Optimization Tools 12
2. Animating with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Animating with SVG 17
Benefits of Drawing with SVG 19
Silky-Smooth Animation 21
3. CSS Animation and Hand-Drawn SVG Sprites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Keyframe Animation with steps() and SVG Sprites, Two Ways 23
The “Drawing in Illustrator with a Template” Way 27
The “Drawing in an SVG Editor or on Paper Frame-by-Frame and Using
Grunticon to Sprite” Way 28
Simple Code for Complex Movement 29
Simple Walk Cycle 30
4. Creating a Responsive SVG Sprite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
SVG Sprites and CSS for Responsive Development 37
Grouping and DRYing It Out 39
The viewBox Trick 41
Responsive Animation 42
5. UI/UX Animations with No External Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Context-Shifting in UX Patterns 45
vii
Morphing 48
Revealing 48
Isolation 49
Style 50
Anticipatory Cues 52
Interaction 53
Space Conservation 54
Putting It All Together 55
Icons That Transform 55
6. Animating Data Visualizations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Why Use Animation in Data Visualization? 64
D3 with CSS Animation Example 66
Chartist with CSS Animation Example 70
Animating with D3 73
Chaining and Repeating 75
7. A Comparison of Web Animation Technologies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Native Animation 78
CSS/Sass/SCSS 78
requestAnimationFrame() 79
Canvas 79
Web Animations API 80
External Libraries 81
GreenSock (GSAP) 81
Mo.js 82
Bodymovin’ 83
Not Suggested 83
SMIL 83
Velocity.js 83
Snap.svg 84
React-Specific Workflows 84
React-Motion 84
GSAP in React 85
Canvas in React 85
CSS in React 86
Covering Ground 86
8. Animating with GreenSock. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Basic GreenSock Syntax 88
TweenMax/TweenLite 88
.to/.from/.fromTo 88
viii | Table of Contents