Animating SVGs in React with the Native Web Animations API (No Libraries Needed)

While React libraries like Framer Motion are amazing, sometimes you want fine-grained control over SVG animations without adding extra dependencies. In this article, we’ll show how to animate SVG elements directly in React using the native Web Animations API (WAAPI) — no third-party libraries needed, super lightweight, and performance-friendly. Why Animate SVGs with WAAPI? Use cases include: Loading spinners Interactive UI elements Data visualizations with smooth transitions Step 1: Create a Ref to Your SVG Element We'll use a ref to directly access and animate the SVG element once it's mounted: // AnimatedSVG.js import React, { useEffect, useRef } from "react"; const AnimatedSVG = () => { const circleRef = useRef(null); useEffect(() => { if (circleRef.current) { circleRef.current.animate( [ { transform: "scale(1)", fill: "#00f" }, { transform: "scale(1.5)", fill: "#0f0" }, { transform: "scale(1)", fill: "#00f" }, ], { duration: 2000, iterations: Infinity, easing: "ease-in-out", } ); } }, []); return ( ); }; export default AnimatedSVG; Step 2: Integrate into Your App Now simply use your animated SVG component inside your main app: // App.js import React from "react"; import AnimatedSVG from "./AnimatedSVG"; function App() { return ( Native SVG Animation in React ); } export default App; Optional: Add Event-Driven Animations You can even trigger different animations based on events like clicks or hovers: // Add inside AnimatedSVG const handleMouseEnter = () => { circleRef.current.animate( [ { transform: "scale(1)", fill: "#f00" }, { transform: "scale(2)", fill: "#ff0" }, { transform: "scale(1)", fill: "#f00" }, ], { duration: 1000, iterations: 1, easing: "ease-out", } ); }; Pros and Cons ✅ Pros Zero additional dependencies Highly performant; native browser engine Full control over animations programmatically ⚠️ Cons WAAPI browser support is good but not universal (older browsers need polyfills) Managing complex timelines manually can become tedious

Apr 26, 2025 - 20:54

Animating SVGs in React with the Native Web Animations API (No Libraries Needed)

While React libraries like Framer Motion are amazing, sometimes you want fine-grained control over SVG animations without adding extra dependencies. In this article, we’ll show how to animate SVG elements directly in React using the native Web Animations API (WAAPI) — no third-party libraries needed, super lightweight, and performance-friendly.

Why Animate SVGs with WAAPI?

Use cases include:

Loading spinners
Interactive UI elements
Data visualizations with smooth transitions

Step 1: Create a Ref to Your SVG Element

We'll use a ref to directly access and animate the SVG element once it's mounted:

// AnimatedSVG.js
import React, { useEffect, useRef } from "react";

const AnimatedSVG = () => {
  const circleRef = useRef(null);

  useEffect(() => {
    if (circleRef.current) {
      circleRef.current.animate(
        [
          { transform: "scale(1)", fill: "#00f" },
          { transform: "scale(1.5)", fill: "#0f0" },
          { transform: "scale(1)", fill: "#00f" },
        ],
        {
          duration: 2000,
          iterations: Infinity,
          easing: "ease-in-out",
        }
      );
    }
  }, []);

  return (
    
  );
};

export default AnimatedSVG;

Step 2: Integrate into Your App

Now simply use your animated SVG component inside your main app:

// App.js
import React from "react";
import AnimatedSVG from "./AnimatedSVG";

function App() {
  return (
    
      Native SVG Animation in React
      
    
  );
}

export default App;

Optional: Add Event-Driven Animations

You can even trigger different animations based on events like clicks or hovers:

// Add inside AnimatedSVG
const handleMouseEnter = () => {
  circleRef.current.animate(
    [
      { transform: "scale(1)", fill: "#f00" },
      { transform: "scale(2)", fill: "#ff0" },
      { transform: "scale(1)", fill: "#f00" },
    ],
    {
      duration: 1000,
      iterations: 1,
      easing: "ease-out",
    }
  );
};