Svelte on scroll animation

Animate elements
on scroll

A tiny, performant scroll animation library for Svelte.
Zero dependencies. Under 1KB gzipped.

Get Started See Animations

✨

zoom-in

←

fade-left

↻

flip-up

<1KB JavaScript (gzip)

~2KB CSS (full bundle)

30+ Animations

0 Dependencies

Installation

npm install svelte-aos

Quick Start

Import Styles

Add the CSS to your app. Import all or just what you need.

// Import everything
import 'svelte-aos/styles/full.css';

// Or selectively
import 'svelte-aos/styles/base.css'; // Required
import 'svelte-aos/styles/fade.css'; // Optional

Add AOS Component

Place at the top of your layout or page for global configuration.

<script>
  import { AOS } from 'svelte-aos';
</script>

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

Animate Elements

Use attachments (Svelte 5.29+) or actions (Svelte 4+).

<!-- Svelte 5.29+ -->
<div
  data-aos="fade-up"
  {@attach aosAttachment({ animation: 'fade-up' })}>
  Hello
</div>

<!-- Svelte 4 to 5.28 -->
<div data-aos="fade-up" use:aosAction>
  Hello
</div>

💡

The data-aos attribute enables animation on first page load when the element is already visible. Without it, elements only animate when scrolled into view.

Animations

◐ Fade

Opacity transitions with optional movement

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

◎ Zoom

Scale transformations

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

Pure translation without opacity

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

Live Preview

fade-up

fade-down

zoom-in

flip-left

slide-right

zoom-out

Staggered Delays

0ms

100ms

200ms

300ms

400ms

Options

duration number

Animation duration in milliseconds

Default: 400

delay number

Delay before animation starts

Default: 0

easing string

CSS easing function

Default: 'ease'

once boolean

Animate only once (no reverse)

Default: false

offset number

Offset from viewport edge (px)

Default: 120

threshold number

Visibility ratio to trigger (0-1)

Default: 0.1

Available Easings

lineareaseease-inease-outease-in-outease-in-backease-out-backease-in-out-backease-in-sineease-out-sineease-in-out-sineease-in-quadease-out-quadease-in-out-quadease-in-cubicease-out-cubicease-in-out-cubicease-in-quartease-out-quartease-in-out-quart

API Reference

<AOS />

Global configuration component. Place at root level.

<AOS
  options={{
    offset: 120,
    delay: 0,
    duration: 400,
    easing: 'ease',
    once: false,
    disable: false,
    threshold: 0.1,
    anchorPlacement: 'top-bottom'
  }}
/>

aosAttachment

Svelte 5.29+

Svelte 5 attachment for individual elements.

<div
  {@attach aosAttachment({
    animation: 'fade-up',
    delay: 150,
    duration: 400,
    once: true
  })}
>

aosAction

Svelte 4 - 5.28

Svelte action for individual elements.

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

disable

Disable animations globally or conditionally.

<AOS options={{
  // Device type
  disable: 'mobile'  // 'phone' | 'tablet'

  // Boolean
  disable: true

  // Function
  disable: () => window.innerWidth < 768
}} />

Selective Imports

Only import the animations you need to minimize bundle size.

base.css Core setup, CSS variables, reduced motion ✓ Required

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