Build a 3D CMS Cube Gallery on Scroll in Webflow

This is the most ambitious build in the series: a fully CMS-powered cubic gallery where images cross-fade into one another while a real 3D cube rotates and travels through space as you scroll. It looks like something Webflow “can’t do” — and it comes together from pieces you already know: a scrubbed scroll interaction, CMS-driven transforms, split text, and a little 3D CSS.

Because it’s a big one, this companion focuses on the mental model — the four ideas that make it work — rather than every click. Pair it with the cloneable and the Codrops write-up to build along.

How it works

Scroll distance becomes animation time. The section is deliberately tall (500vh — an arbitrary value that sets the overall speed; taller = slower). Inside it, a full-viewport container is position: sticky; top: 0, so it pins in place and acts as a fixed window while the rest of the section scrolls past. A scrubbed GSAP scroll interaction maps how far you’ve scrolled through the section onto the animation’s progress. This is scrub-on-scroll, not trigger actions: the cube rotates and the images cross-fade as you scroll, forward or backward.

The cube is built from the CMS. The clever part is that each face’s position is data. The pictures collection has the obvious fields (image, a short text for the split-text label, an order integer capped at 6 — because a cube has six faces) plus eight “mysterious” numeric fields: origin-left, origin-top, move-x/y/z, and rotate-x/y/z. Those map exactly to CSS transform-origin and the move/rotate transforms. Bind each item’s transform to its own fields (via custom CSS driven by the item’s data) and the six collection items arrange themselves into a cube — each face rotated and pushed out along an axis. Note the field types: rotate values are integers, move values are decimals, because positioning faces in 3D needs that precision — small errors read as visibly misaligned faces.

Two collection lists, two jobs. One collection list renders the background images (stacked on top of each other, sorted by order descending so item 1 sits on top at the start) for the cross-fade + split-text transition. A second uses the same data to build the cube faces. Splitting the work keeps each animation focused.

Real 3D needs two CSS properties. A CSS “cube” looks flat unless the scene has depth: set a perspective on the parent (how strong the 3D foreshortening is) and transform-style: preserve-3d on the cube element, so its faces keep their individual 3D positions instead of being flattened onto the parent’s plane. With those in place, the rotate/move transforms actually move faces through space.

How to use it

1. CMS. A pictures collection with image, a short text, an integer order (max 6), and eight numeric fields: origin-left, origin-top, move-x, move-y, move-z, rotate-x, rotate-y, rotate-z (rotates integer, moves decimal).

2. Scroll scaffold. Section at 500vh. Inside, a main-container at 100vh, position: sticky, top: 0, max-width: none — the pinned window. Inside that, a content wrapper at 100%×100%.

3. Two lists. A background collection list (images stacked, sorted by order descending) for the image + split-text transition, and a second collection list for the cube faces. Bind each cube item’s transform-origin and move/rotate transforms to its CMS fields via custom CSS (from the cloneable). Add perspective to the cube’s parent and transform-style: preserve-3d to the cube.

4. First animation — image & split text. A scrubbed scroll interaction that cross-fades the stacked images and runs a split-text stagger on each text as scroll progresses.

5. Second animation — cube. A scrubbed scroll interaction that animates the cube’s rotation and position through the scene, synced to the same scroll. Finish with responsive adjustments for smaller screens.

The custom CSS that binds the CMS numeric fields to each item’s transform (and the exact face values) lives in the cloneable, with a full written breakdown in the linked Codrops article. Build the 3D math from those rather than reconstructing it by hand.