Chapter 87: SVG animation: SMIL vs CSS vs JavaScript compared

Core Idea

Learn every way to animate SVG: SMIL's animate tag, CSS animations, the Web Animations API and JavaScript libraries, with the strengths, limits and performance cost of each.

Key Concepts

• SMIL: SMIL
• Motion along a path: <animateMotion> is the precursor to CSS's offset-path.
• SMIL isn't dead, but maybe it should be: You'll read that SMIL is deprecated.
• CSS and Web Animations API: CSS and Web Animations are the polar opposite to SMIL in that they can't animate attributes.
• The transform origin gotcha: Rotate an element in CSS and it spins around its own centre.
• Morphing with d: Path data is a CSS property too
• Unsupported properties: As mentioned
• Line drawing: The single most requested SVG animation is line drawing.
• Motion: To sum up

Code Examples

<circle cx="50" cy="50" r="20">
  <animate
    attributeName="r"
    values="20; 40; 20"
    dur="2s"
    repeatCount="indefinite"
  />
</circle>

• What it demonstrates: Core usage pattern for SVG animation: SMIL vs CSS vs JavaScript compared.

Key Takeaways

1. SVG animation: SMIL vs CSS vs JavaScript compared supports SMIL.
2. SVG animation: SMIL vs CSS vs JavaScript compared supports Motion along a path.
3. SVG animation: SMIL vs CSS vs JavaScript compared supports SMIL isn't dead, but maybe it should be.

Connects To

• arc(): related Motion doc page.
• Layout Animation: related Motion doc page.
• svgEffect: related Motion doc page.
• Improvements to Web Animations API: related Motion doc page.
• frame: related Motion doc page.