← Back to Open Source

Animate On Scroll Svelte

v0.1.1

Essential utilities for Web3 developers to streamline blockchain development and interaction with smart contracts.

171325
SvelteAnimationJavaScriptCSSFrontend

Animate On Scroll library for Svelte 5. Trigger CSS animations when elements scroll into view.

This package will give you an easy way to bring scroll-based animations to your Svelte applications using a simple and flexible API.

Why AOS Svelte?

  • Tiny — < 1KB gzipped JavaScript + < 1kb modular CSS
  • Optimized Bundle — Import only what you need for minimal footprint
  • Zero Dependencies — No external dependencies
  • Universal Compatibility — Svelte 4 & 5 support (Actions or Attachments)
  • Highly Performant — Only tracks and animates elements explicitly marked for animation
  • Fully Customizable — 30+ pre-built animations with flexible configuration

Installation

npm 
npm install svelte-aos
yarn 
yarn add svelte-aos
pnpm 
pnpm add svelte-aos

Quick Start

1. Import the styles

in components 
// Import all animations
import 'svelte-aos/styles/full.css';

// Or import only what you need for smaller bundle
import 'svelte-aos/styles/base.css'; // Required
import 'svelte-aos/styles/fade.css'; // Only fade animations
in css 
/* Import all animations */
@import 'svelte-aos/styles/full.css';

/* Or import only what you need */
@import 'svelte-aos/styles/base.css'; /* Required */
@import 'svelte-aos/styles/fade.css'; /* Only fade animations */

2. Add the AOS component to your page or layout

App.svelte svelte logo 
<script>
  import { aosAttachment, aosAction, AOS } from 'svelte-aos';
</script>

<AOS
  options={{
    /* options */
  }}
/>

<!-- Rest of your page or layout -->

3. Add animations to elements

Svelte 5.29+ (attachment) 
<script>
  import { aosAttachment } from 'svelte-aos';
</script>

<!-- Add data-aos only if you want the element to animate on first load when in viewport -->
<h2 data-aos="fade-up" {@attach aosAttachment({ animation: 'fade-up' })}>AOS The Svelte Way</h2>
Svelte 4.x to 5.28 (action) 
<script>
  import { aosAction } from 'svelte-aos';
</script>

<h2 data-aos="fade" use:aosAction={{ animation: 'fade' }}>AOS The Svelte Way</h2>

Available Animations

Fade

text logo 
fade  fade-up  fade-down  fade-left  fade-right
fade-up-left  fade-up-right  fade-down-left  fade-down-right

Zoom

text logo 
zoom-in  zoom-in-up  zoom-in-down  zoom-in-left  zoom-in-right
zoom-out  zoom-out-up  zoom-out-down  zoom-out-left  zoom-out-right

Flip

text logo 
flip-up  flip-down  flip-left  flip-right

Slide

text logo 
slide-up  slide-down  slide-left  slide-right

Per-Element Options

Customize each element with attachment or action parameters:

Duration

Svelte 5.29+ (attachment) 
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', duration: 1000 })}>
Svelte 4.x to 5.28 (action) 
<div data-aos="fade" use:aosAction={{ animation: 'fade', duration: 1000 }}>

Delay

Svelte 5.29+ (attachment) 
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', delay: 300 })}>
Svelte 4.x to 5.28 (action) 
<div data-aos="fade" use:aosAction={{ animation: 'fade', delay: 300 }}>

Easing

Svelte 5.29+ (attachment) 
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', easing: 'ease-out-back' })}>
Svelte 4.x to 5.28 (action) 
<div data-aos="fade" use:aosAction={{ animation: 'fade', easing: 'ease-out-back' }}>

Animate Once

Svelte 5.29+ (attachment) 
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', once: true })}>
Svelte 4.x to 5.28 (action) 
<div data-aos="fade" use:aosAction={{ animation: 'fade', once: true }}>

Staggered Animation

svelte logo 
<div data-aos="fade-up" {@attach aosAttachment({ animation: 'fade-up', delay: 0 })}>First</div>
<div data-aos="fade-up" {@attach aosAttachment({ animation: 'fade-up', delay: 100 })}>Second</div>
<div data-aos="fade-up" {@attach aosAttachment({ animation: 'fade-up', delay: 200 })}>Third</div>

Available Easings

text logo 
linear    ease    ease-in   ease-out    ease-in-out
ease-in-back    ease-out-back    ease-in-out-back
ease-in-sine     ease-out-sine    ease-in-out-sine
ease-in-quad    ease-out-quad   ease-in-out-quad
ease-in-cubic   ease-out-cubic    ease-in-out-cubic
ease-in-quart   ease-out-quart     ease-in-out-quart

API Reference

<AOS /> Component

Add once at the top level of your page or layout. Configures global defaults.

App.svelte svelte logo 
<AOS
  options={{
    offset: 120, // Offset from viewport edge (px)
    delay: 0, // Default delay before animation (ms)
    duration: 400, // Default animation duration (ms)
    easing: 'ease', // Default easing function
    once: false, // Animate only once per element
    anchorPlacement: 'top-bottom', // Which position triggers animation
    disable: false, // Disable all animations
    threshold: 0.1 // IntersectionObserver visibility threshold (0-1)
  }}
/>

aosAttachment (Svelte 5.29+)

Svelte 5 attachment for individual elements.

svelte logo 
<div
  data-aos="fade-up"
  {@attach aosAttachment({
    animation: 'fade-up',
    delay: 150,
    duration: 400,
    once: true
  })}
>
  Animated
</div>

aosAction (Svelte 4.x to 5.28)

Svelte action for individual elements.

svelte logo 
<div
  data-aos="fade-up"
  use:aosAction={{
    animation: 'fade-up',
    delay: 150,
    duration: 400,
    once: true
  }}
>
  Animated
</div>

Disable Option

Disable all animations globally via the <AOS /> component:

svelte logo 
<AOS
  options={{
    // Disable on specific device type
    disable: 'mobile'    // 'mobile' | 'phone' | 'tablet'

    // Or disable entirely
    disable: true

    // Or use a custom function
    disable: () => window.innerWidth < 768
  }}
/>

Selective CSS Imports

Only import the animations you use to reduce bundle size:

FileAnimationsRequired
base.cssCore setup, CSS variables, reduced motionYes
fade.cssfade, fade-up, fade-down, etc.Optional
zoom.csszoom-in, zoom-out variantsOptional
flip.cssflip-up, flip-down, etc.Optional
slide.cssslide-up, slide-down, etc.Optional
easings.cssCustom easing functionsOptional
full.cssEverything bundledConvenience

Example: Only fade animations with custom easings

js logo 
import 'svelte-aos/styles/base.css';
import 'svelte-aos/styles/fade.css';
import 'svelte-aos/styles/easings.css';

Examples

Basic Page

App.svelte svelte logo 
<script>
  import { aosAttachment, AOS } from 'svelte-aos';
  import 'svelte-aos/styles/full.css';
</script>

<AOS config={{ once: true, disable: 'mobile' }} />

<main>
  <section>
    <h1 data-aos="fade-down" {@attach aosAttachment({ animation: 'fade-down' })}>Welcome</h1>
    <p data-aos="fade-up" {@attach aosAttachment({ animation: 'fade-up', delay: 100 })}>
      Scroll to see more
    </p>
  </section>

  <section>
    <div data-aos="fade-right" {@attach aosAttachment({ animation: 'fade-right' })}>Card 1</div>
    <div data-aos="fade-right" {@attach aosAttachment({ animation: 'fade-right', delay: 100 })}>
      Card 2
    </div>
    <div data-aos="fade-right" {@attach aosAttachment({ animation: 'fade-right', delay: 200 })}>
      Card 3
    </div>
  </section>
</main>

With Custom Easing

svelte logo 
<div data-aos="zoom-in" {@attach aosAttachment({ animation: 'zoom-in', easing: 'ease-out-back' })}>
  Bouncy zoom effect
</div>

Contributing

Contributions, issues, and feature requests are welcome! No formal contribution process is set up yet, but feel free to open issues or submit pull requests.

License

MIT © 2026 humanshield85