On this page

Animation

Animation - Markdown

# Animation

If you want to add scroll-based entry animations to a Starwind Pro site, a solid option is [motion-on-scroll](https://motion-on-scroll.pages.dev/).

It keeps the setup small, fits Astro well, and uses a simple attribute-based API that is extremely similar to the popular AOS library.

> **Info:** `motion-on-scroll` is the library used for entry animations on the Starwind Pro homepage, and was created by the developer of Starwind UI and Starwind Pro.

## Why recommend it

- **Small setup**: install the package, import its 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**: the library documents Astro setup directly, so it fits naturally into an Astro project
- **Good for entry animations**: it focuses on common fade, slide, zoom, and similar reveal patterns without requiring a lot of custom code
- **Familiar mental model**: if you've used AOS, the authoring style is similar and easy to pick up
- **Room to grow**: if you need more control later, it also supports custom keyframes, easings, and registered animations

## Quick Start

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

```astro title="src/layouts/Layout.astro"
<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>
```

## Astro and client-side navigation

The library exposes `refresh()` and `refreshHard()` helpers for recalculating animated elements after DOM changes.

That makes it a reasonable choice when your page content changes after load, including client-side navigation scenarios. If you're using Astro's client router or view transitions, this is the part of the API worth knowing about.

> **Tip:** If all you need is straightforward scroll-entry animation, `motion-on-scroll` is usually a simpler fit than building the behavior yourself from scratch.

## Learn more

For installation, API details, and the available presets, see the official docs:

- [motion-on-scroll.pages.dev](https://motion-on-scroll.pages.dev/)
- [Installation guide](https://motion-on-scroll.pages.dev/getting-started/installation/)
- [API reference](https://motion-on-scroll.pages.dev/reference/api/)

If you want to add scroll-based entry animations to a Starwind Pro site, a solid option is motion-on-scroll.

It keeps the setup small, fits Astro well, and uses a simple attribute-based API that is extremely similar to the popular AOS library.

Info

motion-on-scroll is the library used for entry animations on the Starwind Pro homepage, and was created by the developer of Starwind UI and Starwind Pro.

Small setup: install the package, import its 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: the library documents Astro setup directly, so it fits naturally into an Astro project
Good for entry animations: it focuses on common fade, slide, zoom, and similar reveal patterns without requiring a lot of custom code
Familiar mental model: if you’ve used AOS, the authoring style is similar and easy to pick up
Room to grow: if you need more control later, it also supports custom keyframes, easings, and registered animations

Quick Start

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

1
---
2
import "motion-on-scroll/dist/mos.css";
3
---
4

5
<html lang="en">
6
  <head> ... </head>
7
  <body>
8
    <section data-mos="fade-up">...</section>
9

10
    <script>
11
      import { MOS } from "motion-on-scroll";
12
      MOS.init();
13
      document.addEventListener("astro:after-swap", MOS.refreshHard);
14
    </script>
15
  </body>
16
</html>

The library exposes refresh() and refreshHard() helpers for recalculating animated elements after DOM changes.

That makes it a reasonable choice when your page content changes after load, including client-side navigation scenarios. If you’re using Astro’s client router or view transitions, this is the part of the API worth knowing about.

Tip

If all you need is straightforward scroll-entry animation, motion-on-scroll is usually a simpler fit than building the behavior yourself from scratch.

Learn more

For installation, API details, and the available presets, see the official docs: