svelte-reveal
Simple, spring-based reveal animations for Svelte components.
This package has two exports:
<Reveal />: A Svelte component that reveals itself.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
}}>
