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

🚀 Alternatives

  • Framer Motion: Best for complex, declarative animations in React
  • GSAP: Industry standard for deeply sequenced animations

Summary

Animating SVGs with the native Web Animations API inside React gives you precision control and minimal bundle size. It’s perfect for small, clean interactions where you don’t want to bring a sledgehammer to crack a nut. Play around with different easing functions and transform properties for even cooler effects!

For a much more extensive guide on getting the most out of React portals, check out my full 24-page PDF file on Gumroad. It's available for just $10:

Using React Portals Like a Pro.

If you found this useful, you can support me here: buymeacoffee.com/hexshift