Svelte

viewmotion-svelte

The Svelte adapter provides a use:motion action that integrates seamlessly with Svelte’s action system for declarative scroll-reveal animations.

Installation

npm install viewmotion-svelte

use:motion action

Apply animations using Svelte’s use: directive:

<script>
  import { motion } from "viewmotion-svelte";
</script>

<h1 use:motion={{ preset: "fade-up" }}>Hello</h1>

Action parameters

Full example

<script>
  import { motion } from "viewmotion-svelte";
  const items = ["Feature A", "Feature B", "Feature C"];
</script>

<section>
  <h2 use:motion={{ preset: "fade-up" }}>Features</h2>

  {#each items as item, i}
    <div use:motion={{ preset: "fade-up", delay: i * 80 }}>
      {item}
    </div>
  {/each}
</section>

How it works

Under the hood, the use:motion action calls motion() from the core viewmotion package when the element is mounted. It automatically sets data-motion attributes and initializes the IntersectionObserver.

When the component is destroyed, the action cleans up the observer automatically — no manual teardown is required.