Installation

Install

npm install motion-on-scroll

pnpm add motion-on-scroll

yarn add motion-on-scroll

Minimal bootstrapping

You’ll need to import MOS styles, and run the MOS.init() function.

The standalone build bundles Motion and exposes a global MOS object, so it works in a plain HTML page:

<!-- Import MOS styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-on-scroll@latest/dist/mos.css" />

<!-- Load MOS and initialize it -->
<script src="https://cdn.jsdelivr.net/npm/motion-on-scroll@latest/dist/mos.global.js"></script>
<script>
  MOS.init();
</script>

<!-- Somewhere in your markup -->
<section data-mos="fade-up">
  ...
</section>

window.MOS has the same functions as the module build, plus Motion’s animate (as MOS.animate) for use with registerAnimation.

The bare motion-on-scroll import below must be resolved by a bundler such as Vite (or an import map). It will not work in a plain HTML page served as-is.

<!-- Import MOS styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-on-scroll@latest/dist/mos.css" />

<!-- Initialize MOS (requires a bundler, e.g. Vite, to resolve the import) -->
<script type="module">
  import { MOS } from 'motion-on-scroll';
  MOS.init();
</script>

<!-- Somewhere in your markup -->
<section data-mos="fade-up">
  ...
</section>

---
import 'motion-on-scroll/dist/mos.css';
---
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <section data-mos="fade-up">
      ...
    </section>

    <script>
      import { MOS } from 'motion-on-scroll';
      MOS.init();
    </script>
  </body>
</html>

That’s it! Every element declaring a data-mos value is now animated when it enters the viewport.

CSS file

MOS ships with a small stylesheet that keeps elements hidden until they animate in. Import it from motion-on-scroll/mos.css (or motion-on-scroll/dist/mos.css), load it from a CDN as shown above, or copy the file into your own pipeline.

Accessibility and no-JavaScript fallbacks

Reduced motion. By default MOS does nothing for visitors whose system is set to reduce motion: elements are shown immediately, without animating. Pass respectReducedMotion: false to MOS.init() to animate regardless.
Printing. The stylesheet shows every element when the page is printed.
No JavaScript. Elements start hidden and are revealed by the script. To keep content visible when scripts are unavailable, put a no-js class on <html> and remove it from an inline script (MOS’s styles only apply to html:not(.no-js), the same convention AOS uses):

<html class="no-js">
  <head>
    <script>document.documentElement.classList.remove("no-js");</script>
    ...