Librería Portfolio

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



Chapter 1The Anatomy of an SVG
SVG DOM Syntax
viewBox and preserveAspectRatio
Drawing Shapes
Responsive SVG, Grouping, and Drawing Paths
SVG on Export, Recommendations, and Optimization
Reduce Path Points
Optimization Tools
Chapter 2Animating with CSS
Animating with SVG
Benefits of Drawing with SVG
Silky-Smooth Animation
Chapter 3CSS Animation and Hand-Drawn SVG Sprites
Keyframe Animation with steps() and SVG Sprites, Two Ways
Chapter 4Creating a Responsive SVG Sprite
SVG Sprites and CSS for Responsive Development
Grouping and DRYing It Out
The viewBox Trick
Responsive Animation
Chapter 5UI/UX Animations with No External Libraries
Context-Shifting in UX Patterns
Putting It All Together
Chapter 6Animating Data Visualizations
Why Use Animation in Data Visualization?
D3 with CSS Animation Example
Chartist with CSS Animation Example
Animating with D3
Chapter 7A Comparison of Web Animation Technologies
Native Animation
External Libraries
Not Suggested
React-Specific Workflows
Covering Ground
Chapter 8Animating with GreenSock
Basic GreenSock Syntax
Chapter 9GreenSock's Timeline
A Simple Timeline
Relative Labels
Nested and Master Timelines
Chapter 10MorphSVG and Motion Along a Path
MorphSVG
Motion Along a Path
Chapter 11Stagger Effects, Tweening HSL, and SplitText for Text Animation
Staggered Animations
Relative HSL Color Animation
Chapter 12DrawSVG and Draggable
Draggable
DrawSVG
Chapter 13Mo.js
Base Premises
Shapes
Shape Motion
Chapter 14React-Motion


Chapter 15Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
requestAnimationFrame()
GreenSock's AttrPlugin
Practical Application: Animating the viewBox
Chapter 16Responsive Animation
Some Quick Responsive Tips
GreenSock and Responsive SVG
Responsive SVG, with or without GreenSock
Responsive Reorganization by Updating the ViewBox
Responsive Reorganization with Multiple SVGs and Media Queries
Chapter 17Designing, Prototyping, and Animation in Component Libraries
Designing an Animation
Prototyping
Animations in Component Libraries