Svelte Aos

Animated on scroll for svelte

AOS Svelte

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 install svelte-aos
# or
pnpm add svelte-aos
# or
yarn add svelte-aos

Quick Start

1. Import the styles

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

Or 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

<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

Opacity + optional translate

fade  fade-up  fade-down  fade-left  fade-right
fade-up-left  fade-up-right  fade-down-left  fade-down-right

Zoom

Scale + optional translate

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

3D rotation effects

flip-up  flip-down  flip-left  flip-right

Slide

Translate from edge (no opacity)

slide-up  slide-down  slide-left  slide-right

Per-Element Options

Customize each element with attachment or action parameters:

Duration

<!-- Svelte 5.29+ -->
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', duration: 1000 })}>

<!-- Svelte 4.x to 5.28 -->
<div data-aos="fade" use:aosAction={{ animation: 'fade', duration: 1000 }}>

Delay

<!-- Svelte 5.29+ -->
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', delay: 300 })}>

<!-- Svelte 4.x to 5.28 -->
<div data-aos="fade" use:aosAction={{ animation: 'fade', delay: 300 }}>

Easing

<!-- Svelte 5.29+ -->
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', easing: 'ease-out-back' })}>

<!-- Svelte 4.x to 5.28 -->
<div data-aos="fade" use:aosAction={{ animation: 'fade', easing: 'ease-out-back' }}>

Animate Once

<!-- Svelte 5.29+ -->
<div data-aos="fade" {@attach aosAttachment({ animation: 'fade', once: true })}>

<!-- Svelte 4.x to 5.28 -->
<div data-aos="fade" use:aosAction={{ animation: 'fade', once: true }}>

Staggered Animation

<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

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.

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

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

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

💡 Note: The data-aos attribute is only needed if you want the element to animate on first page load when already visible in the viewport.

Disable Option

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

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

File	Animations	Required
`base.css`	Core setup, CSS variables, reduced motion	✅ Yes
`fade.css`	fade, fade-up, fade-down, etc.	Optional
`zoom.css`	zoom-in, zoom-out variants	Optional
`flip.css`	flip-up, flip-down, etc.	Optional
`slide.css`	slide-up, slide-down, etc.	Optional
`easings.css`	Custom easing functions	Optional
`full.css`	Everything bundled	Convenience

Example: Only fade animations with custom easings

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

Examples

Basic Page

<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

<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

Top categories