SVG Animations

SVG Animations

by Sarah Drasner
Released April 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491939703

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.

This practical book takes a deep dive into how you can to solve these problems with stability, performance, and creativity in mind.

Publisher resources

View/Submit Errata

Table of contents

  1. Foreword
  2. Preface
    1. SVG Animation: Where Art and Code Intersect
    2. Conventions Used in This Book
    3. Using Code Examples
    4. O’Reilly Safari
    5. How to Contact Us
    6. Acknowledgments
  3. 1. The Anatomy of an SVG
    1. SVG DOM Syntax
    2. viewBox and preserveAspectRatio
    3. Drawing Shapes
    4. Responsive SVG, Grouping, and Drawing Paths
    5. SVG on Export, Recommendations, and Optimization
    6. Reduce Path Points
    7. Optimization Tools
  4. 2. Animating with CSS
    1. Animating with SVG
    2. Benefits of Drawing with SVG
    3. Silky-Smooth Animation
  5. 3. CSS Animation and Hand-Drawn SVG Sprites
    1. Keyframe Animation with steps() and SVG Sprites, Two Ways
      1. The “Drawing in Illustrator with a Template” Way
      2. The “Drawing in an SVG Editor or on Paper Frame-by-Frame and Using Grunticon to Sprite” Way
      3. Simple Code for Complex Movement
      4. Simple Walk Cycle
  6. 4. Creating a Responsive SVG Sprite
    1. SVG Sprites and CSS for Responsive Development
    2. Grouping and DRYing It Out
    3. The viewBox Trick
    4. Responsive Animation
  7. 5. UI/UX Animations with No External Libraries
    1. Context-Shifting in UX Patterns
      1. Morphing
      2. Revealing
      3. Isolation
      4. Style
      5. Anticipatory Cues
      6. Interaction
      7. Space Conservation
    2. Putting It All Together
      1. Icons That Transform
  8. 6. Animating Data Visualizations
    1. Why Use Animation in Data Visualization?
    2. D3 with CSS Animation Example
    3. Chartist with CSS Animation Example
    4. Animating with D3
      1. Chaining and Repeating
  9. 7. A Comparison of Web Animation Technologies
    1. Native Animation
      1. CSS/Sass/SCSS
      2. requestAnimationFrame()
      3. Canvas
      4. Web Animations API
    2. External Libraries
      1. GreenSock (GSAP)
      2. Mo.js
      3. Bodymovin’
    3. Not Suggested
      1. SMIL
      2. Velocity.js
      3. Snap.svg
    4. React-Specific Workflows
      1. React-Motion
      2. GSAP in React
      3. Canvas in React
      4. CSS in React
    5. Covering Ground
  10. 8. Animating with GreenSock
    1. Basic GreenSock Syntax
      1. TweenMax/TweenLite
      2. .to/.from/.fromTo
      3. Staggering
      4. Elements
      5. Duration
      6. Delay
      7. Properties to Animate
      8. Easing
  11. 9. GreenSock’s Timeline
    1. A Simple Timeline
    2. Relative Labels
    3. Nested and Master Timelines
      1. Organization
      2. Loops
      3. Pausing and Events
      4. Other Timeline Methods
  12. 10. MorphSVG and Motion Along a Path
    1. MorphSVG
      1. findShapeIndex()
    2. Motion Along a Path
  13. 11. Stagger Effects, Tweening HSL, and SplitText for Text Animation
    1. Staggered Animations
    2. Relative HSL Color Animation
      1. SplitText
  14. 12. DrawSVG and Draggable
    1. Draggable
      1. Drag Types
      2. hitTest()
      3. Using Draggable to Control a Timeline
    2. DrawSVG
  15. 13. Mo.js
    1. Base Premises
    2. Shapes
    3. Shape Motion
      1. Chaining
      2. Swirls
      3. Burst
      4. Timeline
      5. Tween
      6. Path Easing
      7. Mo.js Tools
  16. 14. React-Motion
    1. <Motion />
    2. <StaggeredMotion />
  17. 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
    1. requestAnimationFrame()
    2. GreenSock’s AttrPlugin
    3. Practical Application: Animating the viewBox
      1. Another Demo: A Guided Infographic
  18. 16. Responsive Animation
    1. Some Quick Responsive Tips
    2. GreenSock and Responsive SVG
    3. Responsive SVG, with or without GreenSock
    4. Responsive Reorganization by Updating the ViewBox
    5. Responsive Reorganization with Multiple SVGs and Media Queries
      1. Less Pizzazz on Mobile
      2. Have a Plan
  19. 17. Designing, Prototyping, and Animation in Component Libraries
    1. Designing an Animation
      1. Working with the Language of Motion
      2. Rein It In
      3. Have an Opinion
      4. Elevate This
    2. Prototyping
      1. Backward to Move Forward
      2. Tools
      3. “Murder Your Darlings”
      4. Design and Code Workflows
    3. Animations in Component Libraries
      1. Buy-in
      2. Time Is Money
      3. The Sky’s the Limit
  20. Index

Product information

  • Title: SVG Animations
  • Author(s): Sarah Drasner
  • Release date: April 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491939703