Horizontal Sticky Stack

A scroll-driven layout where cards pin in place and stack horizontally as the user scrolls down. This pattern creates a sense of depth and sequence, commonly used for feature showcases and product walkthroughs.

What makes this tutorial special: the motion is pure CSS using animation-* — no JavaScript runs while you scroll. (The effect’s small script only builds the cards and writes your settings as CSS variables.) Note that scroll-driven animations are not supported on Firefox at the time of this writing.

Step 1: The first stack

My approach for complex layouts always starts with the static layout and a proper box model first.

Step 2: Static, responsive layout

Then proceed with the complete layout for both desktop and mobile. No need to put 100% effort into this step — it’s just a prep so we have in mind how the mobile layout will look.

At this step, since we are aware that there’s animation to apply, be a bit more generous with HTML elements — allow more wrappers, each handling a specific purpose. One wrapper for sticky, one for sizing with width and height, one for transform. This helps avoid CSS conflicts in the animation steps.

Step 3: Sticky

Here comes the fun part. Implement the animation once the static layout is ready.

Use it on a site

One script, no build step. Every element with data-horizontal-sticky-stack starts the effect; settings go in data-* attributes in kebab-case.

<div data-horizontal-sticky-stack style="height:480px"></div>
<script src="https://vanilla-motion.com/embed/horizontal-sticky-stack/1.0.0/horizontal-sticky-stack.js"></script>