🚀 Starwind Pro Early Access! Get 50% off lifetime access with code LAUNCH at checkout

Starwind Pro

Guides

A Practical Animation Library for Astro: Motion on Scroll

If you need straightforward entry animations in an Astro or Starwind project, motion-on-scroll is a solid option with a small setup and a familiar attribute-based API.

Cover for A Practical Animation Library for Astro: Motion on Scroll
Branden
Branden

If you want to add scroll-based entry animations to an Astro site without building the behavior yourself from scratch, motion-on-scroll is worth a look.

It is not the only option, and it is not trying to be a full animation framework. What it does well is make common reveal animations easy to add with a small amount of setup.

INFO

motion-on-scroll is created by the same developer behind Starwind UI and Starwind Pro.

Why I think it is a good fit

There are a few reasons it stands out for Starwind Pro projects:

  • Small setup: install the package, include the CSS, call MOS.init(), and add data-mos attributes to the elements you want to animate
  • motion based: built on top of the popular motion library, which means it uses the same underlying animation engine as Starwind Pro blocks
  • Astro-friendly docs: the official documentation includes Astro-specific setup, which makes adoption more straightforward
  • Familiar authoring model: if you have used AOS before, the attribute-driven approach is extremely similar
  • Built for common entry animations: fade, slide, zoom, and similar reveal patterns are the main use case
  • Can scale up if needed: custom keyframes, easings, and registered animations are available when the presets are not enough

That combination makes it a practical recommendation when the goal is simple entry animation rather than a large motion system.

A note on Astro client-side navigation

One detail I like is that the library exposes refresh() and refreshHard() helpers for re-evaluating animated elements after DOM changes.

That does not mean you should assume magic framework integration everywhere, but it does make the library a reasonable choice for sites that update content after initial page load, including Astro client-side navigation scenarios.

Astro setup example

Install the library with npm install motion-on-scroll or your preferred package manager, then initialize the library:

src/layouts/Layout.astro
---
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();
      document.addEventListener("astro:after-swap", MOS.refreshHard);
    </script>
  </body>
</html>

A small demo

This demo uses the same basic data-mos, delay, and duration pattern we use in the core site hero.

Example hero animation sequence

Add polished entry motion without overcomplicating your Astro site.

The elements in this section animate in with simple data-mos attributes and staggered delays.

Read the installation guide

View the API reference

When I would use it

I would reach for it when I want:

  • a lightweight way to add scroll-entry motion
  • an API that is easy to scan in markup
  • something familiar to teams who have used AOS-style libraries before
  • a solution that does not force me into a larger animation architecture for basic reveal effects

When I might choose something else

If you need highly choreographed interface motion, state-driven animation, or complex gesture interactions, a lower-level animation library may be a better fit.

For straightforward entry animations, though, motion-on-scroll hits a useful middle ground.

Back to all posts