SVG Animations: From Common UX Implementations to Complex Responsive Animation

243 Pages·2017·28.22 MB·English

by  Sarah Drasner

S VG
A nimations
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 [email protected].
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]
Th��u 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