Motion Gallery · Carousel & Flow
Carousel Flow
A flat focus carousel — full-size centre card, scaled-down faded side cards.
Example 1 · Scroll choreography
Scroll to play — reveal & dissolve
A full scroll choreography. Motion → Scroll-scrub with Pin on, so YOUR scroll drives the motion — not a timer. Paired with Entrance (Style tab): as the gallery pins to the screen the cards fade in one by one, it animates as you scroll, then they dissolve one by one on the way out.
Example 2 · Entrance + pause on hover
Focus carousel, pause on hover
A flat focus carousel — centre card full size, side cards scaled down and faded. The whole carousel zooms in on load; Motion → On Hover is Pause. Click a card to open the lightbox.
Example 3 · Vertical
Flowing vertically
The same carousel set to Vertical orientation — cards slide up/down through the centre focus.
Example 4 · Tiny sides
Side cards shrunk away
A low Side Card Scale (40%) shrinks the flanking cards right down, so the centre card dominates with just a hint of the neighbours.
Example 5 · Peek carousel
Same-size peek
Side Card Scale at 100 keeps the neighbours full size, with a wider gap — a row of equal cards peeking in from both sides.
Example 6 · Ratio & corners
Widescreen cards, soft corners
Widescreen 16:9 cards (the default is square) with rounded corners. Click a card to open it full-size. Plus Stage Overflow = Spill, so the fanned cards show in full beyond the stage box — and the gallery sits at Z-Index −1 (Advanced → Position: Relative) behind this heading, so the title stays clean in front of the overflow.
Docs & Playground
Tweak every option live
Play with all of these settings in real time and read the full option reference in the manual.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.