Animating the API3 Ecosystem with GSAP and SVGs

Creating a site that feels alive takes more than static content—it’s about the small, dynamic touches that guide users, highlight important info, and make the whole experience memorable. In building the API3 Ecosystem site, I used GSAP (GreenSock Animation Platform) and SVG animations to add that extra dimension. Here’s how we went from static to engaging with the help of these tools.

Building a GSAP Animation Composable for Vue

Managing animations across multiple components needed some organization. I created a custom GSAP composable to handle starting, stopping, and cleaning up animations across the site.

The Magic of Micro-Animations

Micro-animations are the subtle movements that make an interface feel responsive and engaging. On the API3 site, these tiny animations make the difference between a page that just sits there and one that feels interactive.

Entrance Animations for Cards and Decorations

Bringing API3 Concepts to Life with SVG Animations

SVGs are the perfect tool for illustrating complex ideas. Here’s how we used SVG animations to explain some of API3’s technical concepts.

1. First-Party Oracle Services Visualization

To showcase API3’s data feeds, I animated rotating gears and numeric displays. It’s a mix of precision and energy, capturing both the mechanics and motion of real-time data.

useGsap((gsap) => {
  const timeline = gsap.timeline({
    repeat: -1,
  });

  timeline.fromTo(
    ".datafeed-first-party .digit",
    {
      opacity: 0,
    },
    {
      opacity: 1,
      duration: 0,
      stagger: {
        each: 0.1,
        from: "random",
      },
      ease: "power1.inOut",
    }
  );

  timeline.to(
    ".datafeed-first-party .gear",
    {
      rotate: 360,
      transformOrigin: "center",
      duration: 1.5,
      ease: "power1.inOut",
    },
    "-=1"
  );
});

2. Developer Experience Flow

One of the more intricate animations was for API3’s developer experience flow. Using GSAP’s MotionPath plugin, I animated data points following a path, showing how data moves and interacts. This animation visually explains data flow—a complex concept made intuitive.

function pointPathAnimation(timeline, path) {
  timeline.to(
    `${path} ~ .point`,
    {
      transformOrigin: "50% 50%",
      duration: 2,
      scale: 0.25,
      ease: "power2.inOut",
      motionPath: {
        path: path,
        align: path,
        alignOrigin: [0.5, 0.5],
        autoRotate: true,
        start: 1,
        end: 0,
      },
      stagger: {
        each: 0.5,
        from: "random",
        easing: "power3.inOut",
      },
    },
    0.5
  );
}

3. The OEV Network Loading Animation

For the OEV Network loader, I went for a timeline animation that combined scaling, rotation, and staggering. This loader has a “loading” feel but in a way that keeps things visually interesting.

useGsap((gsap) => {
  const timeline = gsap.timeline({ repeat: 0, repeatDelay: 0.1 });

  timeline.set(".oev-loader :is(#O, #V) path", {
    scale: 0.5,
    y: 100,
    opacity: 1,
  });

  timeline.to(".oev-loader :is(#O, #V) path", {
    duration: 0.75,
    y: 0,
    scale: 1,
    ease: "back.out(1.7)",
    stagger: {
      each: 0.3,
      from: "end",
    },
  });
});

Wrapping Up

With GSAP and SVG animations, we transformed API3’s Ecosystem site from static content to an interactive experience. These animations don’t just look cool; they guide users, make the site feel more responsive, and help explain API3’s services in a visual way.

The takeaway? Animations, when used thoughtfully, can turn an ordinary interface into something much more engaging. By combining strategic animation with performance optimizations, we’ve built a site that’s as functional as it is fun to use.