Replacing Animation Libraries with Native Web APIs

If your project imports GSAP, Framer Motion, or Anime.js just to handle page transitions, scroll effects, or element entrance animations, you’re carrying bundle weight the browser no longer asks you to carry. Modern web animation APIs have matured to the point where replacing JavaScript animation libraries is a realistic option for most everyday UI work.

Here’s a practical look at what the platform now gives you.

The Web Animations API: Programmatic Control Without a Library

The Web Animations API (WAAPI) lets you animate DOM elements directly in JavaScript using Element.animate(). It gives you the dynamic control developers typically reach for libraries to get — pause, play, reverse, seek — while benefiting from the same browser animation engine used by CSS animations.

const card = document.querySelector('.card')
const animation = card.animate(
  [
    { transform: 'translateY(20px)', opacity: 0 },
    { transform: 'translateY(0)',    opacity: 1 }
  ],
  { duration: 400, easing: 'ease-out', fill: 'forwards' }
)

// Chain animations using the finished promise
animation.finished.then(() => console.log('Entrance complete'))

You get staggered animations via delay, sequential chaining via .finished, and playback control via .playbackRate — all without a single dependency.

What it replaces: Anime.js, Velocity.js, and basic GSAP use cases. Browser support: Supported in all modern browsers. See current rollout on caniuse.com.

Accessibility note: Always check prefers-reduced-motion before running motion. Pass duration: 0 when the user prefers reduced motion rather than skipping the animation call entirely, so layout side effects from fill: 'forwards' still apply.

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
element.animate(keyframes, { duration: reduced ? 0 : 400, fill: 'forwards' })

CSS Scroll-Driven Animations: Scroll Effects Without JavaScript

CSS Scroll-Driven Animations replace the most common Intersection Observer + animation library pattern: revealing elements as the user scrolls.

@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

No JavaScript. No library. The browser links the animation’s progress directly to the element’s position in the scroll container.

Browser support: Shipping in Chromium browsers starting with Chrome 115 and continuing to evolve across engines. Check current support status on caniuse.com.

The View Transitions API: Page and State Transitions

The View Transitions API handles the animated handoff between two UI states — the pattern that previously required Framer Motion’s AnimatePresence or custom GSAP timeline work.

function navigate(updateFn) {
  if (!document.startViewTransition) {
    updateFn() // Fallback for unsupported browsers
    return
  }
  document.startViewTransition(updateFn)
}

For multi-page apps, a single CSS rule activates cross-document transitions:

@view-transition {
  navigation: auto;
}

Assign view-transition-name to shared elements and the browser morphs them between pages automatically.

Browser support: Same-document transitions are widely supported in modern browsers, while cross-document transitions continue rolling out across engines. See the current status on caniuse.com.

What it replaces: Framer Motion page transitions, React Router animation wrappers, custom GSAP page-swap logic.

When Libraries Still Make Sense

Native APIs cover a wide range of everyday animation needs, but libraries retain clear advantages in specific scenarios:

• Physics-based motion (spring animations, momentum) — Framer Motion, React Spring
• Complex SVG animation — GSAP’s MorphSVG or DrawSVG plugins
• Advanced timeline orchestration across many elements
• Broad cross-browser abstraction when you can’t rely on progressive enhancement

The decision isn’t native vs. library — it’s whether the platform already solves your specific problem.

Conclusion

Before adding an animation dependency, check whether the Web Animations API, CSS Scroll-Driven Animations, or the View Transitions API covers your use case. For most entrance animations, scroll effects, and page transitions, they do. Reserve libraries for the specialized work they genuinely excel at — physics-based springs, complex SVG morphing, and intricate multi-element timelines. Your bundle, and your users, will benefit from the difference.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.