ESM with Bundle

This option is intended for use with modern frameworks like React, Vue or Svelte, or any project that supports ES modules. The CSS is automatically injected into the page at runtime, so you only need to import a single file.

Installation

npm

npm install on-view-animations

Direct Download

Download ova.bundle.esm.js — includes both JavaScript and CSS in a single file.

Download ova.bundle.esm.js

Usage

Import initOVA and call it once the DOM is ready.

React

import { initOVA } from "on-view-animations";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    initOVA();
  }, []);

  return (
    <div data-ova="animation: fade-top; duration: 800ms">
      <h1>Hello World</h1>
    </div>
  );
}

Vue

<script setup>
import { initOVA } from 'on-view-animations';
import { onMounted } from 'vue';

onMounted(() => {
  initOVA();
});
</script>

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

Svelte

<script>
  import { initOVA } from 'on-view-animations';
  import { onMount } from 'svelte';

  onMount(() => {
    initOVA();
  });
</script>

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

Vanilla ESM

<script type="module">
  import { initOVA } from "on-view-animations";
  initOVA();
</script>

Direct Download

If you installed via direct download, replace the import path with './path/to/ova.bundle.esm.js'.

CSS auto-injected

With this bundle you do not need to import any CSS file separately — it is automatically injected at runtime.

HTML

Add the data-ova attribute to any element you want to animate:

<div data-ova>Animated element</div>