Example blocks

A queue of sprites, each owning its own useAnimatable x/y. On pointermove every sprite eases toward the cursor with a progressively longer duration — the head follows tight, the tail lags.

Click a tile and it flies into a centered modal; click again to send it back. The real DOM node is reparented into a <dialog> inside a single AnimeLayout root (with children:'*'), so anime.js’s layout system correlates the old grid position with the new modal position via a shared data-layout-id and FLIP-animates the size + position change on an inOutQuad curve.

Item A

Item B

Item C

Item D

Item E

Item F

Select a bottom tile to promote it into the large hero area. The previous hero takes its slot while AnimeLayout measures the CSS Grid before/after positions and FLIP-animates each real tile into place.

Hover a thumbnail and a larger preview window chases the cursor with spring-eased movement (useAnimatable translate setters fed on every pointermove). Moving between thumbnails swaps the image with an <Anime> cross-fade so it never hard-cuts.

hover a thumbnail · preview tracks the cursor

Click Add to cart and a sprite arcs from the card to the basket along a three-point keyframe curve (origin → lifted midpoint → basket). The declarative <Anime> drives translate, scale, and the basket’s impact pulse.

A 20×20 grid that lights every cell the pointer sweeps — even on a fast flick. On each pointermove a supercover line walks from the last cell to the current one, lighting all cells in between. Each cell owns a useAnimatable that flashes and fades it.

The card tilts in 3D toward the cursor. Pointer position maps to rotateX/ rotateY setters from useAnimatable, which ease toward each new value — and a glare highlight follows the pointer. Leaving the card springs it back to level.

A draggable handle reveals one image over another. A single drag value feeds two useAnimatable setters — the overlay’s width and the handle’s left — easing in lockstep with pointer capture holding the drag through fast flicks.

Before

After

⇆

drag the handle · reveal before / after

Icons magnify toward the cursor with a smooth inverted-parabola falloff so neighbors rise too — the signature dock “genie”. Each icon owns a useAnimatable for scale + translateY; one dock-level pointermove computes every icon’s target from its distance to the cursor. Leaving springs them back to rest.

Toggle easeReverse to compare transitions: ON executes a custom closing sequence with smooth, non-bouncy curves (outQuad) and adjustable speed, while OFF plays the entrance sequence in reverse (reversing the bouncy outBack animation).

A 3×3 bento grid sits centered inside a scrollable box; as you scroll inside the box, the grid tracks interpolate from compact to huge (33% → 100%). Centering + overflow: hidden turns that into a zoom — the center image fills the box while the rest scatter off-canvas, then a content panel fades in. A port of the GSAP “Scrubbed Bento Gallery” driven by one useAnimeOnScroll observer (scoped to a container) scrubbing utils.lerp on the grid tracks.

01

02

03

04

06

07

08

09

Scrubbed · Grid-track zoom

Keep scrolling · one image takes over

The reveal

One image, full focus.

The bento collapsed into a single fullscreen frame as you scrolled, the hero held for a beat, then slid up to reveal this section — a pinned scrub sequence built entirely with useAnimeOnScroll driving a grid-track interpolation through utils.lerp. No FLIP plugin, no manual requestAnimationFrame loop.

useAnimeOnScroll

One observer scrubs the whole zoom, scoped to a container.

utils.lerp

Interpolates grid tracks 33% → 100% so only the center cell wins.

sticky + clip

Centering + overflow turns track growth into a zoom-to-fill.

scroll inside the box · bento zooms, hero holds, then reveals

0%

An Apple-style scroll-driven canvas image sequence preloading 147 frames. Syncs scroll progress to the active frame index using a plain object playhead, or switches to autoplay mode with loops and adjustable speeds. Storytelling overlays fade in and out at specific frames.

Scroll through a pinned before/after frame. The after panel moves in from the right while its image counter-moves from the left. AnimeScroll scopes progress to the fixed comparison panel, with no page-height expansion or infinite loop.

before / raw light

after / color grade

Scroll comparison / 01

Scroll to reveal the other side.

keep scrolling

pinned stage → opposing image transformsfinite / scrubbed

Use one wheel, touch, or keyboard gesture to advance a finite sequence of full-frame scenes. Opposing wrappers create the layered slide while Anime.js SplitText settles each heading character independently.

Scroll down

Animated with Anime.js

react-animejs

Animation platform

Keep scrolling

scroll inside

observer gesture · layered scene · finite

01 / First signal

01 / 05

A self-contained panel stack inspired by GreenSock’s layered pinning pattern. Each panel pins at the top of the stage while the next panel layers over it in one continuous, finite scroll sequence.

A native WebGL image stack where AnimeScroll feeds signed scroll velocity into a cover-mapped shader. Move faster to pull the RGB channels apart; every frame falls back to its image when WebGL is unavailable.

Scroll shader / WebGL canvas

Let velocity leave a trace.

Each frame is its own shader surface. Scroll faster to pull color apart and bend the image.

Shader frame / 01

Electric weather

image fallback

Shader frame / 02

Red horizon

image fallback

Shader frame / 03

Quiet geometry

image fallback

Shader frame / 04

Tidal memory

image fallback

live distortion0%

scroll velocity → shader strength

A grid of images that stagger-fades in as each enters the viewport — a port of GSAP’s ScrollTrigger.batch(). A container-scoped IntersectionObservercollects items entering within the same 100ms window, then Anime.js animates that batch with stagger().

scroll inside the box · entering items are batched and staggered

A canvas particle field driven by one AnimeTimeline. Each particle is a plain JavaScript target with function-based positions and staggered timing; the timeline’s update callback redraws the canvas, while the controls toggle playback speed.

Click the stage to raise and lower an SVG curve. Two sequential d path morphs are composed in AnimeTimeline, then played forward or reversed from the same timeline.

Click the stage to cascade-cover it. Four stacked SVG layers each morph their d attribute through a keyframe sequence (flat → curve → full cover) via one AnimeMorph per layer; an incremental stagger on play()/reverse() makes the reveal read as a travelling wave. A port of the codrops “Dynamic Shape Overlays”.

A pinned box scrubs a long line of SplitText characters sideways as you scroll vertically. Each char settles in with a random vertical offset + rotation tied to its horizontal position on screen — GSAP’s containerAnimation trick, replicated with one useAnimeOnScroll scrub driving a per-frame back.out ease.