GSAP-Free Animations with the Web Animations API

Animations Without Libraries: Lightweight and Fast with WAAPI

No more adding heavy libraries to your bundle. WAAPI combines the best of CSS and JS using only native JavaScript.

A Simple Start

const element = document.querySelector('.ball');
element.animate([
  { transform: 'translateY(0)' },
  { transform: 'translateY(-20px)' }
], {
  duration: 300,
  iterations: Infinity,
  direction: 'alternate'
});

Here, the element with class .ball bounces like a ball. But it’s not just visual — this animation is GPU-accelerated. Because the browser can run animations off the main thread, performance can be smoother than even CSS transitions.

Why WAAPI?

• No library dependency: Native by default — no extra weight or version headaches.
• Performance-friendly: Hardware acceleration yields high FPS.
• Flexible timing: Full control via easing, delay, iterations, etc.
• Dynamic control: Start, pause, resume, or reverse animations.
• JS + CSS together: The power of CSS keyframes with the control of JS.

You’re in Control

Every WAAPI call returns an Animation object. You can start, stop, change speed, or reverse it.

const anim = element.animate([...], { duration: 1000, easing: 'ease-in-out' });
anim.pause(); // pause
anim.play(); // resume
anim.reverse(); // reverse direction

Need a callback when it finishes?

anim.onfinish = () => console.log('Animation complete!');

This is perfect for chained sequences — e.g., hiding one element then showing another. Goodbye, setTimeout gymnastics. 👋

CSS Keyframe Integration

WAAPI can also manage CSS-defined animations. Define @keyframes bounce in CSS and adjust speed or direction via JS.

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

const ball = document.querySelector('.ball');
const player = ball.animate({ animation: 'bounce 1s infinite' });
player.updatePlaybackRate(2); // double the speed

Now your CSS animations aren’t static — they become living, scriptable systems in JavaScript.

Real-World Use Cases

• Micro-interactions: Hover, click, focus flourishes.
• Page transitions: Enter/exit effects in routers or SPAs.
• Scroll-driven effects: Combine with IntersectionObserver.
• Dashboard visuals: Bars, charts, loading indicators.
• Game-like interactions: WAAPI can integrate with Canvas or WebGL.

Caveats

WAAPI is supported by most modern browsers, but Safari can still be a bit picky. On mobile especially, some methods (like updatePlaybackRate) may be missing. So check first:

if ('animate' in Element.prototype) {
  // safe to use
}

Also remember long-running animations can drain battery on mobile. Animations are lovely — but at 3% battery, nobody notices. 🥰

Extra: Mastering Timing

With KeyframeEffect and AnimationTimeline, WAAPI supports timeline-based choreography. Multiple elements can animate together with offsets, making scene transitions or sequences much easier.

const fade = new KeyframeEffect(element, [
  { opacity: 0 },
  { opacity: 1 }
], { duration: 500 });
const player = new Animation(fade, document.timeline);
player.play();

This resembles GSAP’s timeline — but fully native!

Conclusion

The Web Animations API is redefining the future of web animation. Zero dependencies, high performance, precise timing control, and modern browser support mean the age of “library-free animation” has arrived.

Capture the spirit of animation in code with WAAPI — from tiny interactions to grand scene transitions, everything is now within reach.

Best of all, not a single import required.