ScrollCue.js

A lightweight scroll animation library using Intersection Observer API

Now with buttery-smooth advanced animations!

CDN Example

👇 Scroll down to see the animations in action! 👇

Fade & Slide Animations

Fade In

fade-in

Slide Up

slide-up

Slide Down

slide-down

Slide Left

slide-left

Slide Right

slide-right

Scale & Transform Animations

Bounce In

bounce-in

Zoom In

zoom-in

Zoom Out

zoom-out

Rotate In

rotate-in

Flip In

flip-in

Advanced Animations

Spring

spring

Elastic In

elastic-in

Flip 3D

flip-3d

Custom Origin Rotate

Rotate origin: bottom left

Flip X

flip-x

Dynamic Effects

Wave

wave

Float

float

Flicker

flicker

Shake

shake

Text Effects

Typing

This text will be typed out...

Staggered Items

First item

Second item

Third item

Fourth item

Ocean-Inspired Effects

Boat Rock

⛵

Wind Effect

💨

Ripple Effect

💧

Storm Effect

⛈️

Breaking Wave

🌊

Delays & Durations

With Delay

delay: 500ms

Fast Duration

duration: 400ms

Slow Duration

duration: 1200ms

Delay + Duration

delay: 300ms
duration: 1000ms

Enhanced Easing Functions

Ease Out Back

easeOutBack

Ease Out Elastic

easeOutElastic

Ease In Out

easeInOut

Ease Out Bounce

easeOutBounce

Parallax & Scroll Effects

Y Parallax (0.5)

X Parallax (0.2)

Rotate Parallax (0.3)

Scale Parallax (0.4)

3D Parallax (0.6)