A lightweight and customizable library for creating smooth scroll animations in Svelte applications.
npm install svelte-inscroll
<script>
import { ScrollAnimation } from 'svelte-inscroll';
</script>
<ScrollAnimation animation="fade-up" delay={200} duration={800}>
<div class="your-content">
This content will animate when scrolled into view
</div>
</ScrollAnimation>
fade-up
- Fades in while moving upfade-down
- Fades in while moving downfade-left
- Fades in while moving from leftfade-right
- Fades in while moving from rightzoom-in
- Scales up from smaller sizezoom-out
- Scales down from larger sizeflip-in
- Flips in from a rotationrotate-in
- Rotates in from a tilted positionbounce-in
- Bounces in with a spring effectslide-up
- Slides up from belowProp | Type | Default | Description |
---|---|---|---|
animation | string | 'fade-up' | Animation type from the available list |
delay | number | 'random' | 0 | Delay in ms before the animation starts. Use 'random' for random delay between 100-400ms |
duration | number | 800 | Duration of the animation in ms |
threshold | number | 0.2 | Intersection threshold (0-1) that determines when the animation triggers |
rootMargin | string | '0px' | Root margin for Intersection Observer |
once | boolean | false | Whether the animation should only play once |
customClass | string | '' | Additional classes to add to the wrapper |
customStyles | object | {} | Custom inline styles to apply to the wrapper |
<script>
import { ScrollAnimation } from 'svelte-inscroll';
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
</script>
{#each items as item, i}
<ScrollAnimation
animation="fade-up"
delay="random"
duration={800}
>
<div class="card">
{item}
</div>
</ScrollAnimation>
{/each}
MIT