@evanwinter/svelte-reveal

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

---

key	description	default value	values
direction	the direction the element moves	"up"	"up", "down", "left", "right"
delay	number of milliseconds to delay the reveal	0	number
distance	number of pixels the element moves	32	number

---

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