svelte-inscroll Svelte Themes

Svelte Inscroll

A lightweight and customizable library for creating smooth scroll animations in Svelte applications.

Svelte Smooth Scroll Animations

A lightweight and customizable library for creating smooth scroll animations in Svelte applications.

Demo

Svelte InScroll

Installation

npm install svelte-inscroll

Usage

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

Available Animation Types

  • fade-up - Fades in while moving up
  • fade-down - Fades in while moving down
  • fade-left - Fades in while moving from left
  • fade-right - Fades in while moving from right
  • zoom-in - Scales up from smaller size
  • zoom-out - Scales down from larger size
  • flip-in - Flips in from a rotation
  • rotate-in - Rotates in from a tilted position
  • bounce-in - Bounces in with a spring effect
  • slide-up - Slides up from below

Props

Prop 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

Example with Random Delays

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

License

MIT

Top categories

Loading Svelte Themes