ViewakeWake elements as they enter the view.

A tiny, direction-aware reveal library with predictable once and replay modes. Framework-agnostic core, CDN build, React, Next.js, and Vue support.

Get started

Understand replay

CSS owns the animation

JavaScript only changes the data-viewake-state attribute. Add a new animation with CSS alone.

Direction-aware replay

Passing above never hides content. Replay resets only while the element is safely below the viewport.

Works everywhere

Plain HTML and CDN, React, Next.js, and Vue share the same tiny framework-free core.

Accessible by default

Content stays visible without JavaScript and reduced-motion preferences are respected automatically.

SSR safe

Import the core on the server without reading window or document during module evaluation.

About 2 KB gzipped

IntersectionObserver, a two-state machine, and CSS transitions—without a runtime animation engine.

LIVE PLAYGROUND

See the state model, not a magic trick.

Animation Mode Delay Duration Easing Trigger

ViewportScroll down or use the controls.

sleeping below ↓

fade-up · replay · 200ms + 600ms

Now I’m awake.

Pass me, return above me, and scroll down again to compare modes.

Continue scrolling. The card stays awake above the viewport.

Current markup

<div data-viewake="fade-up" data-viewake-mode="replay" data-viewake-delay="200" data-viewake-duration="600" data-viewake-easing="cubic-bezier(0.22, 1, 0.36, 1)">

Put threshold: 0.25 in Viewake.init({ threshold: 0.25 }).

Scroll down to wake the card.
Continue until it passes above.
Return to the top so it is below again.
Scroll down once more.

Events

Waiting for movement…