Books & Videos

Table of Contents

  1. Chapter 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

  2. Chapter 2 Animating with CSS

    1. Animating with SVG

    2. Benefits of Drawing with SVG

    3. Silky-Smooth Animation

  3. Chapter 3 CSS Animation and Hand-Drawn SVG Sprites

    1. Keyframe Animation with steps() and SVG Sprites, Two Ways

  4. Chapter 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

  5. Chapter 5 UI/UX Animations with No External Libraries

    1. Context-Shifting in UX Patterns

    2. Putting It All Together

  6. Chapter 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

  7. Chapter 7 A Comparison of Web Animation Technologies

    1. Native Animation

    2. External Libraries

    3. Not Suggested

    4. React-Specific Workflows

    5. Covering Ground

  8. Chapter 8 Animating with GreenSock

    1. Basic GreenSock Syntax

  9. Chapter 9 GreenSock’s Timeline

    1. A Simple Timeline

    2. Relative Labels

    3. Nested and Master Timelines

  10. Chapter 10 MorphSVG and Motion Along a Path

    1. MorphSVG

    2. Motion Along a Path

  11. Chapter 11 Stagger Effects, Tweening HSL, and SplitText for Text Animation

    1. Staggered Animations

    2. Relative HSL Color Animation

  12. Chapter 12 DrawSVG and Draggable

    1. Draggable

    2. DrawSVG

  13. Chapter 13 Mo.js

    1. Base Premises

    2. Shapes

    3. Shape Motion

  14. Chapter 14 React-Motion

    1. <Motion />

    2. <StaggeredMotion />

  15. Chapter 15 Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations

    1. requestAnimationFrame()

    2. GreenSock’s AttrPlugin

    3. Practical Application: Animating the viewBox

  16. Chapter 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

  17. Chapter 17 Designing, Prototyping, and Animation in Component Libraries

    1. Designing an Animation

    2. Prototyping

    3. Animations in Component Libraries