Collection 01
The foundational motion vocabulary. Each demo animates transform, opacity, filter, or clip-path only — never layout properties — and every card can be replayed on demand.
The simplest reveal: opacity travels from 0 to 1 with no positional change, so the content resolves in place.
Opacity-only transitions read as calm and authoritative — useful for content that should feel already present rather than arriving.
Updates as you adjust parameters.
Opacity paired with a short upward translate on the Y axis — the workhorse entrance for stacked editorial content.
A 40–60px rise is enough to imply arrival without the element appearing to fly in from off-screen.
Updates as you adjust parameters.
The inverse of Fade Up: the element settles downward into position, suited to headers and dropdown-style panels.
Downward entrances imply something delivered from above — advisories, alerts, and masthead content.
Updates as you adjust parameters.
Content translates in from the right edge toward its resting position while opacity resolves.
Horizontal motion suits sequential narratives where each step advances the reader leftward.
Updates as you adjust parameters.
The mirrored counterpart, entering from the left edge — pair with Fade Left for alternating row layouts.
Alternating the direction row by row creates rhythm without introducing a new kind of motion.
Updates as you adjust parameters.
A transform-scale from 0.86 to 1 combined with opacity, giving the element a sense of physical presence.
Scaling from just under 1 avoids the cartoonish feel of starting at zero while still reading as growth.
Updates as you adjust parameters.
An oversized element settles back to its true size — the image appears to pull focus as it resolves.
Starting above 1 and easing down mimics a lens finding focus.
Updates as you adjust parameters.
Animates the CSS filter from a heavy blur to fully sharp, simulating an optical instrument resolving detail.
Filter animation is GPU-assisted and avoids touching layout.
Updates as you adjust parameters.
A small rotation unwinds to zero alongside a scale and fade, giving the panel a hinged, tactile arrival.
Anchoring transform-origin to a corner makes the rotation read as a hinge rather than a spin.
Updates as you adjust parameters.
Animates clip-path inset() so the image is uncovered from the bottom edge upward without moving any pixels.
clip-path never triggers layout, so the reveal stays smooth.
Updates as you adjust parameters.
A true overflow mask: the caption sits inside a clipped viewport and slides up from beneath its own edge.
Updates as you adjust parameters.
A solid overlay panel slides away using scaleX, exposing the content beneath — no layout properties animated.
The overlay scales on the X axis, which the compositor handles cheaply.
Updates as you adjust parameters.
Two overlay panels part from the centre line, opening symmetrically like a stage curtain.
Symmetric motion draws the eye to the middle before releasing it outward.
Updates as you adjust parameters.
Several sibling elements share one tween, offset by a fixed interval so they cascade in sequence.
Updates as you adjust parameters.
GSAP's elastic ease overshoots the target and oscillates back, producing spring-like settle without custom loops.
Updates as you adjust parameters.
The bounce ease drops the element onto its baseline with decaying rebounds, all handled by GSAP's easing engine.
Updates as you adjust parameters.