Transition gallery
Explore the library by motion family, preview every transition, and jump straight into the full documentation experience.
Creative
17 entriesCircular Portal
The next section blooms out of a circular portal in the center.
Dynamic Mask Reveal
A slanted mask wipes across the viewport with a clean angled seam.
Elastic Stretch
The page behaves like rubber—stretching, wobbling, snapping, and rebounding into the next section.
Glass Distortion
A frosted-glass panel slides up from below, creating lenticular refraction across the viewport before dissolving to reveal the next section.
Gradient Burn
A glowing burn line travels up the screen, igniting the next section.
Gravity Flip
The world's gravity rotates 90° or 180°. All UI elements fall toward the new direction and settle into the next layout.
Ink Spread
Two organic ink blots spread and merge to reveal the next section.
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.
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.
Mirror Reflection
The screen becomes a mirror. The reflection starts behaving differently, then the reflected world replaces reality.
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.
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.
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.
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.
Spotlight Reveal
A soft spotlight mask grows until the next section fills the frame.
Wave Reveal
An SVG wave cap rides the incoming section as it sweeps upward.
Split & Fragment
11 entriesBlinds Reveal
Vertical blinds open strip by strip to expose the next section.
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.
Curtain Split
Top and bottom curtains slide in from opposite sides and seal shut.
Diagonal Split
Two triangular shards fly in from opposite corners and fuse.
Dot Matrix Reveal
A field of growing dots dissolves the screen into the next section.
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.
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.
Reality Tear
A jagged tear appears in the center, ripping the page apart like fabric. The next page exists underneath and stretches into view.
Shatter Transition
The viewport fractures into 20+ irregular shards that explode outward from the centre with physics-inspired stagger, revealing the incoming section beneath.
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.
Vertical Split
Two half-screen doors slide vertically and lock into a seamless panel.
3D
17 entriesCamera 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.
Card Stack
The current section settles back like a card while the next slides over.
Cinematic Zoom
Zooms through the current section, landing inside the next one.
Dimensional Slice
Invisible planes slice the page into thick 3D slabs that slide independently, exposing the next section between them.
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.
Fold Reveal
The next section unfolds downward like a hinged panel with real shading.
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.
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.
Layered Depth Shift
Layers move at different depths for a true parallax handoff.
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.
Origami Fold
The page folds into intricate paper structures, then unfolds into an entirely different layout.
Page Curl
A realistic page curl begins from any corner, with thickness, shadows, and bending, revealing the content beneath.
Perspective Flip
Sections rotate through 3D space around a shared horizon.
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.
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.
Time Freeze
The outgoing page freezes into hundreds of floating fragments while the camera moves through them, revealing the next page behind.
Scroll
9 entriesDirection-Based Reveal
The incoming section slides from the direction of scroll with a glowing motion-trail edge line. A subtle skew on entry straightens as the panel lands.
Elastic Curtain
A curtain with a velocity-reactive elastic edge rises into place.
Magnetic Pull
Sections are treated as polar magnets. The outgoing repels away and the incoming snaps into place with elastic physics — like two charged plates meeting across the viewport.
Multi-Layer Scroll
Six layers of the incoming section enter from different directions with unique skews and delays, assembling like a kinetic collage on a single scroll-driven timeline.
Parallax Section Shift
Sections cross at different scroll speeds for a deep parallax feel.
Progressive Morph
Horizontal bands dissolve progressively from top to bottom while the incoming section slides in from the right. A pulsing outline frame marks the morphing boundary.
Scroll Warp
Scroll velocity skews and stretches the handoff between sections.
Section Pin Reveal
The current section pins in place while the next slides over it.
Zoom Scroll
The current section zooms and dissolves while the next scales in.
Particles
10 entriesDust 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.
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.
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.
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.
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.
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.
Particle Dissolve
The section dissolves into drifting particles that fan outward as a dot mask grows.
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.
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.