React image gallery and carousel sections

Gallery: Layout switcher

An example of one gallery that blends between row, coverflow, grid, barrel, helix and sphere layouts, built on the Motion+ Gallery in Motion for React.

Gallery: Autoplay barrel

An example of a barrel gallery that autoplays, pauses on hover and opens an item larger while the others fall back, built on the Motion+ Gallery in Motion for React.

Gallery: Coverflow hero

An example of a hero section with a draggable coverflow gallery, inline selection and a live caption, built on the Motion+ Gallery in Motion for React.

Gallery: Velocity tilt reel

An example of a film reel whose frames lean into the drag and settle on release, built on the Motion+ Gallery and its tilt modifier in Motion for React.

Gallery: Filterable grid

An example of a category-filtered product grid where items enter and exit with presence animations, built on the Motion+ Gallery in Motion for React.

Gallery: Grid with detail view

An example of a draggable product grid that opens each item into a detail view with a thumbnail strip and an info panel, built on the Motion+ Gallery in Motion for React.

Gallery: Tilted product wall

An example of a tilted, bulging 3D product wall that steps back as an item opens into a detail view, built on the Motion+ Gallery in Motion for React.

Gallery: Helix timeline

An example of a horizontal helix of film stills that corkscrews as you scroll, with a live timestamp readout, built on the Motion+ Gallery in Motion for React.

Gallery: Lightbox

An example of a photo grid that opens shots into a lightbox with previous, next and close buttons, built on the Motion+ Gallery detail view in Motion for React.

Gallery: Lookbook reveal

An example of a curled lookbook row that reveals a story panel around the open piece, built on the Motion+ Gallery and galleryReveal in Motion for React.

Gallery: Turning dial

An example of a full circular dial of products that turns on its own around a centred caption, built on the Motion+ Gallery ring arrangement in Motion for React.

Gallery: Card fan

An example of a hand-of-cards fan with arrow controls and a live caption, built on the Motion+ Gallery ring arrangement in Motion for React.

Gallery: Ripple row

An example of a looping row of pill-shaped products that ripples with drag speed, built on the Motion+ Gallery and its ripple modifier in Motion for React.

Gallery: Scatter entrance

An example of a wavy product row whose items scatter in and land in line on load, built on the Motion+ Gallery presence options in Motion for React.

Gallery: Scroll-driven diagonal

An example of a diagonal gallery driven by page scroll through its two-way progress value, built on the Motion+ Gallery in Motion for React.

Gallery: Sphere explorer

An example of a draggable 3D sphere of photos that opens a frame into a detail view while the rest fade, built on the Motion+ Gallery in Motion for React.

Gallery: Swipe card stack

An example of a swipeable card stack with arrow controls and a synced caption, built on the Motion+ Gallery stack arrangement in Motion for React.

Gallery: Staircase

An example of a full-bleed row of looks that steps back into the page like a staircase, with a synced caption, built on the Motion+ Gallery in Motion for React.

Gallery: Thumbnail stage

An example of a large image stage with a clickable thumbnail row and a progress bar bound to the gallery's position, built on the Motion+ Gallery in Motion for React.

Gallery: Vertical index

An example of a vertical gallery synced to a clickable index of names, built on the Motion+ Gallery in Motion for React.

Galleries