SVG Animations: From Common UX Implementations to Complex Responsive Animation

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.

• Learn how to make SVG cross-browser compatible, backwards compatible, optimized, and responsive
• Plan and debug animation
• Make a complex animation responsive, as many sites are responsive
• Profile each animation technique in terms of performance so that you know what you’re getting in to with each library or native technology

Table of Contents

Chapter 1. The Anatomy of an SVG
Chapter 2. Animating with CSS
Chapter 3. CSS Animation and Hand-Drawn SVG Sprites
Chapter 4. Creating a Responsive SVG Sprite
Chapter 5. UI/UX Animations with No External Libraries
Chapter 6. Animating Data Visualizations
Chapter 7. A Comparison of Web Animation Technologies
Chapter 8. Animating with GreenSock
Chapter 9. GreenSock’s Timeline
Chapter 10. MorphSVG and Motion Along a Path
Chapter 11. Stagger Effects, Tweening HSL, and SplitText for Text Animation
Chapter 12. DrawSVG and Draggable
Chapter 13. Mo.js
Chapter 14. React-Motion
Chapter 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
Chapter 16. Responsive Animation
Chapter 17. Designing, Prototyping, and Animation in Component Libraries