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

origin: bottom left

Flip X

flip-x

Morph

morph

Dynamic Effects

Wave

wave

Float

float

Flicker

flicker

Shake

shake

Scroll Skew

scroll-skew

Stretch

stretch

Text Effects

Typing

This text will be typed out...

Staggered Items

First item
Second item
Third item
Fourth item

Fade Split

DUALITY TRANSFORM

Morph Animations

Morph

morph

Morph Circle

morph-circle

Morph Square

morph-square

Skew Animations

Skew

skew

Skew Left

skew-left

Skew Right

skew-right

Skew Dynamic

skew-dynamic

Scroll Skew

scroll-skew

Stretch Animations

Stretch (Vertical)

stretch

Stretch Horizontal

stretch-h

Stretch Both

stretch-both

Stretch Dynamic

stretch-dynamic

Scroll Stretch

scroll-stretch

Split & Path Animations

Fade Split

DUALITY TRANSFORM

Zoom Path

zoom-path

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