v1.0.0

Scroll animations,
made simple.

A lightweight, performant scroll animation library built with IntersectionObserver.

GitHub npm View Demos ↓
↓ Scroll to explore

Fade

Opacity transitions with optional directional movement.

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

Slide

Pure transform slides — no opacity change.

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

Zoom

Scale-based entrance animations.

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

Flip & Rotate

3D perspective flips, rotations, and spins.

flip
flip-right
flip-left
flip-up
flip-down
rotate
rotate-right
rotate-left
spin
spin-right
spin-left
revolve
revolve-right
revolve-left

Transforms

Grow, shrink, stretch, skew, and slant.

grow
grow-right
grow-left
grow-up
grow-down
shrink
shrink-right
shrink-left
shrink-up
shrink-down
stretch
stretch-vertical
skew
skew-right
skew-left
skew-up
skew-down
slant
slant-right
slant-left

Filters

CSS filter-based effects — blur, greyscale, sepia, and more.

blur
grey
brightness
invert
sepia
saturate
hue-rotate
backdrop

Stagger

Sequentially animate children with configurable delay.

Features

Advanced controls available on every animation.

Scroll Direction

Animates on scroll DOWN only
Animates on scroll UP only

Scroll Progress

Element tracks 0-100% as it travels through the viewport. CSS vars --jos_scroll also update live.

0%

Anchor-to-Anchor Progress

Track scroll between two markers. 0% at #start, 100% at #end.

── #anchor-start ──
0%
── #anchor-end ──

Once & Mirror

once: true — animates a single time
once: 3 — animates up to 3 times
mirror: false — no reverse transition on leave

Inverse Animations

Enter: static → Leave: custom-bounce
Enter: static → Leave: collapse (scroll down)

Invoke Callbacks

Open DevTools console and scroll past this card