Svelte Appear Transition
Apply styling to elements when they appear in the viewport
Svelte Appear Transition
An easy to use and SSR friendly Svelte action that transitions elements when they appear in the viewport.
Installation
npm i -D svelte-appear-transition
Examples
Fade in
<div
use:appear={{
from: {
opacity: '0',
transform: 'translateY(40px)',
transitionTimingFunction: 'ease-out'
},
to: {
opacity: '1',
transform: 'translateY(0)'
},
duration: 500
}}
>
...
</div>
Same transition, but using Tailwind to apply the default styles:
<div
class="opacity-0 translate-y-10 duration-500 ease-out"
use:appear={{
to: {
opacity: '1',
transform: 'translateY(0)'
}
}}
>
...
</div>
Staggered slide up
{#each items as item, i}
<div
use:appear={{
from: {
transform: 'translateY(40px)',
transitionDelay: `${i * 100}ms`,
transitionTimingFunction: 'ease-out'
},
to: {
transform: 'translateY(0)'
},
duration: 500
}}
>
{item}
</div>
{/each}
Usage
Settings
| Name | Optional | Default | Description |
|---|---|---|---|
to |
x | - | A string of class names or a styling object to apply when the element is in view. |
from |
✓ | - | A string of class names or a styling object to apply by default. |
duration |
✓ | 500 |
Duration of the transition in milliseconds. |
threshold |
✓ | 0.5 |
Threshold at which the transition will be triggered. Either a single number or an array of numbers between 0.0 and 1.0. |
bothWays |
✓ | false |
Whether to apply the transition in both directions. Can be true only if from is defined. |
Events
| Name | Description | Example |
|---|---|---|
styletransitionstart |
Fired right before a transition starts. | on:styletransitionstart={(event) => { event as TransitionEvent }} |
styletransitionend |
Fired right after a transition ends. | on:styletransitionend={(event) => { event as TransitionEvent }} |
The detail property of TransitionEvent has the following shape:
{
/** The element that triggered the transition. */
element: HTMLElement;
/** The settings that were passed to the action. */
transition: TransitionSettings;
/** The direction of the transition. */
direction: 'in' | 'out';
}
