svelte-reveal

Simple, spring-based reveal animations for Svelte components.

This package has two exports:

1. <Reveal />: A Svelte component that reveals itself.
2. use:reveal: A Svelte action that reveals the DOM element it's attached to.

Usage

Using <Reveal />

Direction

<Reveal direction="up">
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>
<Reveal direction="down">
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>
<Reveal direction="left">
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>
<Reveal direction="right">
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>

Delay

<Reveal delay={300}>
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>

Use delay to stagger multiple items.

{#each things as thing, i}
    <Reveal delay={i * 50}>
        <p>{thing.text}</p>
    </Reveal>
{/each}

Distance

<Reveal distance={100}>
    <p>Anim et laborum sit incididunt sit nostrud.</p>
</Reveal>

Using use:reveal

<div use:reveal />

<div use:reveal={{
  x: 48,
  stiffness: 0.05,
  damping: 0.6,
  delay: 300
}}>