@evanwinter/svelte-reveal v0.0.5

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
}}>