Migrate from AOS

MOS is API-compatible with AOS where practical. In many cases you only need to swap the script and CSS imports, and rename attributes.

1. Install MOS and remove AOS

npm

npm uninstall aos
npm install motion-on-scroll

pnpm

pnpm remove aos
pnpm add motion-on-scroll

yarn

yarn remove aos
yarn add motion-on-scroll

2. Replace the script and CSS import

Before (AOS)

<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

<script type="module">
  import { AOS } from 'aos';
  AOS.init({
    duration: 600,
    once: true
  });
</script>

After (MOS)

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

<script type="module">
  import { MOS } from 'motion-on-scroll';
  MOS.init({
    duration: 600,
    once: true
  });
</script>

3. Rename data attributes

Note

The easiest way to migrate attributes is to use a find-and-replace to replace all data-aos- with data-mos-

AOS	MOS	Notes
data-aos	data-mos	Animation preset name
data-aos-offset	data-mos-offset	Positive number in px
data-aos-delay	data-mos-delay	ms
data-aos-duration	data-mos-duration	ms
data-aos-easing	data-mos-easing	Any CSS easing or spring()
data-aos-anchor	data-mos-anchor	New trigger for animation
data-aos-anchor-placement	data-mos-anchor-placement	9 keyword combos
data-aos-once	data-mos-once	Boolean

4. Global options equivalence

AOS option	MOS option	Default
offset	offset	120
duration	duration	400
delay	delay	0
easing	easing	'ease'
once	once	false
disable	disable	false
mirror	mirror	false
throttleDelay	throttleDelay	99
debounceDelay	debounceDelay	50
startEvent	startEvent	'DOMContentLoaded'
disableMutationObserver	disableMutationObserver	false

5. Verify animation presets

MOS ships all of the AOS presets. Any custom animations can be replicated by registering custom presets.

You’re done! Your site now enjoys GPU-accelerated, browser-native scroll animations—Motion uses the Web Animations API when possible, and gracefully falls back to JavaScript (requestAnimationFrame) for values WAAPI can’t handle.