ESM Standalone

This option gives you full control over the CSS. The styles are provided as a separate file, so you can import or load them however you prefer — useful when you want to manage all your stylesheets in one place or customize the CSS directly.

Installation

npm
Direct Download

npm install on-view-animations

Then import both the JS and the CSS from the package:

import { initOVA } from "on-view-animations/dist/ova.esm.js";
import "on-view-animations/dist/ova.css";

Usage

Import both files in your project. The CSS must be loaded separately.

React
Vue
Svelte
Vanilla ESM

import { initOVA } from "on-view-animations/dist/ova.esm.js";
import "on-view-animations/dist/ova.css";
import { useEffect } from "react";

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

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

<script setup>
import { initOVA } from 'on-view-animations/dist/ova.esm.js';
import 'on-view-animations/dist/ova.css';
import { onMounted } from 'vue';

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

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

<script>
  import { initOVA } from 'on-view-animations/dist/ova.esm.js';
  import 'on-view-animations/dist/ova.css';
  import { onMount } from 'svelte';

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

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

<head>
  <link rel="stylesheet" href="ova.css" />
</head>
<body>
  <script type="module">
    import { initOVA } from "./ova.esm.js";
    initOVA();
  </script>
</body>

Direct Download

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

tip

Use this option if you want to customize or extend the OVA animations by editing ova.css directly, or if you manage all your styles through a single CSS pipeline.

Installation​

Usage​

Installation

Usage