Motion On Scroll (MOS)

Effortless, AOS-compatible scroll animations powered by Motion.

Framework-agnostic, MOS lets you add scroll-triggered animations with nothing but data-mos attributes. Under the hood it uses Motion’s powerful animate API, giving you:

• 27 preset effects out of the box
• Support for custom keyframes, easings, and fully bespoke timelines
• AOS-compatible features for painless migration
• First-class TypeScript types

📚 Full docs → motion-on-scroll.pages.dev

Quick start

npm i motion-on-scroll

With a bundler (Vite, Astro, webpack, ...):

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

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

<!-- Element to animate -->
<div data-mos="fade-up">Hello world</div>

Without a bundler, load the standalone build from a CDN. It bundles Motion and exposes a global MOS, just like AOS does:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-on-scroll@latest/dist/mos.css" />
<script src="https://cdn.jsdelivr.net/npm/motion-on-scroll@latest/dist/mos.global.js"></script>
<script>
  MOS.init();
</script>

Migrating from AOS? Check the guide → https://motion-on-scroll.pages.dev/getting-started/migrate-from-aos

Basic usage

All you have to do is to add data-mos attribute to html element, like so:

<div data-mos="animation_name"></div>

Script will trigger "animation_name" animation on this element, if you scroll to it.