Transition gallery

Explore the library by motion family, preview every transition, and jump straight into the full documentation experience.

Creative

17 entries

Circular Portal

The next section blooms out of a circular portal in the center.

MotionCreative

Dynamic Mask Reveal

A slanted mask wipes across the viewport with a clean angled seam.

MotionCreative

Elastic Stretch

The page behaves like rubber—stretching, wobbling, snapping, and rebounding into the next section.

MotionCreative

Glass Distortion

A frosted-glass panel slides up from below, creating lenticular refraction across the viewport before dissolving to reveal the next section.

MotionCreative

Gradient Burn

A glowing burn line travels up the screen, igniting the next section.

MotionCreative

Gravity Flip

The world's gravity rotates 90° or 180°. All UI elements fall toward the new direction and settle into the next layout.

MotionCreative

Ink Spread

Two organic ink blots spread and merge to reveal the next section.

MotionCreative

Liquid Morph

Four organic ink-like blobs grow from the corners and merge to flood the viewport, revealing the next section through pure shape and motion.

MotionCreative
Coming soon

Liquid Refraction

The screen becomes liquid glass. Ripples distort the content before it melts into the incoming page.

Mesh Gradient Morph

Animated mesh gradient nodes drift across the screen, eroding the outgoing section while a colour-bleeding overlay bridges the two backgrounds.

MotionCreative

Mirror Reflection

The screen becomes a mirror. The reflection starts behaving differently, then the reflected world replaces reality.

MotionCreative

Molten Pour

Viscous molten metal pours down from the top of the viewport in thick rivulets, cooling and solidifying to reveal the incoming section cast in a metallic sheen.

MotionCreative

Page Burn

The outgoing section catches fire from the bottom edge. An organic burn frontier sweeps upward through horizontal strips, leaving glowing embers drifting in the air before the next section is revealed beneath the ash.

MotionCreative

Pixel Melt

The outgoing section melts downward column by column in a staggered left-to-right cascade, each column sliding off the bottom at a different speed before the next section is revealed.

MotionCreative

Ripple Reveal

Five concentric ripple rings expand outward from the viewport centre, the innermost wave acting as a growing reveal mask. Outer rings glow with a cyan halo.

MotionCreative

Spotlight Reveal

A soft spotlight mask grows until the next section fills the frame.

MotionCreative

Wave Reveal

An SVG wave cap rides the incoming section as it sweeps upward.

MotionCreative

Split & Fragment

11 entries

Blinds Reveal

Vertical blinds open strip by strip to expose the next section.

MotionSplit & Fragment

Crystal Shatter

The viewport fractures into a grid of crystalline shards — each with refraction highlights — that scatter and fade with glacial elegance before the next section assembles.

MotionSplit & Fragment

Curtain Split

Top and bottom curtains slide in from opposite sides and seal shut.

MotionSplit & Fragment

Diagonal Split

Two triangular shards fly in from opposite corners and fuse.

MotionSplit & Fragment

Dot Matrix Reveal

A field of growing dots dissolves the screen into the next section.

MotionSplit & Fragment

Panel Pass

The top and bottom halves of the next section slide in from opposite sides and fuse into a solid whole, carrying the incoming content with a subtle inner zoom.

MotionSplit & Fragment

Paper Tear

The viewport rips apart along a jagged horizontal edge. Upper and lower halves separate with counter-rotation, revealing the incoming section behind the torn pages.

MotionSplit & Fragment

Reality Tear

A jagged tear appears in the center, ripping the page apart like fabric. The next page exists underneath and stretches into view.

MotionSplit & Fragment

Shatter Transition

The viewport fractures into 20+ irregular shards that explode outward from the centre with physics-inspired stagger, revealing the incoming section beneath.

MotionSplit & Fragment

Thunder Crack

A jagged lightning bolt fractures the screen diagonally, the two halves supercharging outward with a white flash — leaving the incoming section glowing in the aftermath.

MotionSplit & Fragment

Vertical Split

Two half-screen doors slide vertically and lock into a seamless panel.

MotionSplit & Fragment

3D

17 entries

Camera Flythrough

The camera rockets through a series of receding depth planes before landing inside the next section. Each plane rushes past the viewer like a warp-speed jump.

Motion3D

Card Stack

The current section settles back like a card while the next slides over.

Motion3D

Cinematic Zoom

Zooms through the current section, landing inside the next one.

Motion3D

Dimensional Slice

Invisible planes slice the page into thick 3D slabs that slide independently, exposing the next section between them.

Motion3D
Coming soon

Domino Collapse

The page is divided into vertical panels that topple one after another like dominoes, revealing the next page.

Dynamic Portal

A glowing iris portal opens from a single point at screen centre, expanding with a spinning ring until it consumes the entire viewport.

Motion3D

Fold Reveal

The next section unfolds downward like a hinged panel with real shading.

Motion3D

Hero Morph

A small rounded hero card at the centre morphs outward into a full-bleed panel. Corners soften and sharpen as it expands, with an ambient glow ring for depth.

Motion3D

Infinite Tunnel

A perspective tunnel of shrinking frames flies toward the camera. Each nested frame rushes past the viewer, creating a warp-speed telescoping illusion.

Motion3D

Layered Depth Shift

Layers move at different depths for a true parallax handoff.

Motion3D

Neon Corridor

The camera flies down a neon-lit corridor of receding frames that narrow to a point before detonating into the next full-screen section — a cyberpunk flythrough.

Motion3D

Origami Fold

The page folds into intricate paper structures, then unfolds into an entirely different layout.

Motion3D

Page Curl

A realistic page curl begins from any corner, with thickness, shadows, and bending, revealing the content beneath.

Motion3D

Perspective Flip

Sections rotate through 3D space around a shared horizon.

Motion3D

Spatial Warp

Space itself bends between sections. Horizontal strips skew and stretch in a gravitational-lens wave before snapping back with the new section in place.

Motion3D

Starfield Warp

Hundreds of star particles stretch into hyperspace streaks and converge toward a central vanishing point, accelerating the viewer into the next section at warp speed.

Motion3D
Coming soon

Time Freeze

The outgoing page freezes into hundreds of floating fragments while the camera moves through them, revealing the next page behind.

Scroll

9 entries

Particles

10 entries

Dust Simulation

Wind pressure from the left blows the outgoing section away as a grid of fine particles. Each cell drifts rightward with turbulent lift and velocity variance.

MotionParticles

Energy Burst

An energy shockwave erupts from viewport centre — three pulsing rings and 24 radial rays bleach the outgoing section before the incoming one materialises from the glow.

MotionParticles

Floating Particle Flow

Sixty luminous particles drift upward from the bottom, each on a unique path governed by seeded pseudo-random physics, forming a living particle curtain between sections.

MotionParticles

Interactive Particles

Particles converge from scatter into a concentric-ring formation, pulse as if alive, then burst radially outward as the incoming section takes over.

MotionParticles

Orbiting Particle Reveal

Four rings of luminous particles spiral inward like a galactic accretion disk, compressing to a point before exploding outward to reveal the next section.

MotionParticles

Particle Assembly

The incoming section assembles tile by tile from scattered chaos. Tiles fly in from random off-screen positions to snap into their correct grid slots from the centre outward.

MotionParticles

Particle Dissolve

The section dissolves into drifting particles that fan outward as a dot mask grows.

MotionParticles

Particle Explosion

The outgoing section shatters into a tile grid that explodes radially from the centre. Each tile travels a physics-driven trajectory with rotation and fade.

MotionParticles
Coming soon

Smoke Dissolve

The page evaporates into volumetric smoke that drifts away while the new page condenses from the smoke.

Thanos Snap

The outgoing section dissolves into fine particles that fly outward in random directions, creating a sense of chaos and disintegration.

MotionParticles

Premium

8 entries

Aurora Drift

Flowing aurora-borealis curtains of iridescent light sweep across the viewport, dissolving the outgoing section into shifting green-violet waves before the next scene crystallises beneath.

MotionPremium

Black Hole

A gravitational singularity forms at viewport centre, pulling every pixel of the outgoing section into a vortex before the incoming scene explodes outward from the same point.

MotionPremium

Cloth Simulation Reveal

A simulated cloth of staggered strips lifts off the next section as it peels away.

MotionPremium

Holographic Glitch

Scanline corruption, RGB channel splits, and chromatic aberration tear the outgoing section apart like a failing hologram — leaving the next section fully intact.

MotionPremium

Lens Distortion

A barrel-lens warp grows from a glowing point at viewport centre. Concentric refraction rings distort the outgoing section before the lens inflates to fill the screen.

MotionPremium

Prism Refraction

A virtual prism splits light into seven spectral bands that fan outward across the viewport, each band sweeping the incoming section into view at a different angle.

MotionPremium

SVG Shape Morph

A clip-path mask morphs through a sequence of shapes — diamond → starburst → hexagonal shield → full rectangle — progressively revealing the incoming section.

MotionPremium

Volumetric Light Reveal

God rays descend from a radiant source, bleaching the outgoing section before the new one materialises from the light. Fourteen volumetric beams create cinematic depth.

MotionPremium