DEV Community

Cover image for Animating SVGs in React with the Native Web Animations API (No Libraries Needed)
HexShift
HexShift

Posted on • Edited on

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 (
    <svg width="100" height="100">
      <circle ref={circleRef} cx="50" cy="50" r="30" fill="#00f" />
    </svg>
  );
};

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",
    }
  );
};

<circle
  ref={circleRef}
  cx="50"
  cy="50"
  r="30"
  fill="#00f"
  onMouseEnter={handleMouseEnter}
/>

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.

Download my 16-page guide Crafting Visual Effects with SVG Filters — it covers:

  • Animated blur and glow effects
  • Morphing distortion maps
  • Composition techniques for scalable motion graphics All for just $10.

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

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

👋 Kindness is contagious

Please show some love ❤️ or share a kind word in the comments if you found this useful!

Got it!