Skip to content
Svelte Reveal

Getting Started

Svelte Reveal is a library created with the purpose of helping Svelte users add reveal on scroll animations to their web applications in the easiest way possible. This library leverages the Intersection Observer API in order to know when to trigger the animations.

Installation

Terminal window
npm i -D svelte-reveal

Usage

  1. Import the library in your Svelte component:

    App.svelte
    <script>
      import { reveal } from 'svelte-reveal';
    </script>

  2. Add the imported reveal action to the DOM element you want to transition:

    App.svelte
    <h1 use:reveal>Hello world</h1>
    <p use:reveal={{ transition: 'slide' }}>A paragraph</p>

    If you want to use the action on a Svelte component, you need to pass the reveal options via props:

    App.svelte
    <script>
      import Heading from './Heading.svelte';
    </script>
    

    <Heading useReveal={{ transition: 'slide' }}>Hello world</Heading>
    Heading.svelte
    <script lang="ts">
      import { reveal, type RevealOptions } from 'svelte-reveal';
      export let useReveal: RevealOptions;
    </script>
    

    <h1 use:reveal={useReveal}>
      <slot />
    </h1>

Rationale

If you happened to scout the internet for other similar libraries, you might have noticed that other authors have decided to create their own library using Svelte slots (similar to React children). There is nothing wrong with that approach, but in my opinion it goes a bit against one of Svelte’s core purpose: writing more concise code. Having to wrap every to-be-transitioned component adds at least 2 extra lines of code each time, making your files unnecessarily bloated for such a simple add-on.

You might have also noticed people adding event listeners to the window object in order to transition elements, but in terms of performance it doesn’t scale very well.

Instead, I decided to use Svelte actions, which are functions you can attach to a DOM element and that allow you to get access to that particular element and hook into its lifecycle. They take up considerably fewer lines of code, and so far I haven’t encountered any big obstacle or performance drawback. Morever, this library is backed by the Intersection Observer API, which is great for performance.