Skip to main content
OVA Logo

OVA — On View Animations

OVA is a lightweight JavaScript library that animates HTML elements as they enter the viewport. It requires no dependencies and is built on the native IntersectionObserver API.

How it works​

Add a data-ova attribute to any HTML element. When that element scrolls into view, OVA automatically triggers its animation. No JavaScript configuration required — everything is controlled via HTML attributes.

<div data-ova="animation: fade-top; duration: 800ms; delay: 200ms">
  <h1>Hello World</h1>
</div>

Features​

  • ðŸŠķ Lightweight — one JS file and one CSS file, no dependencies
  • ⚡ Performant — uses IntersectionObserver and stops observing after the animation fires
  • ðŸŽĻ Customizable — control animation, duration, easing, delay and offset per element
  • 🔌 Flexible — available as Vanilla JS bundle, ESM with bundled CSS, or ESM with separate CSS
  • ✏ïļ Extensible — add your own custom animations with plain CSS

Browser support​

OVA relies on the IntersectionObserver API, which is supported by all modern browsers. Internet Explorer is not supported.

License​

OVA is released under the MIT License.