# Horizontal Sticky Stack

> A vanilla CSS horizontal scroll section where cards stick and stack as you scroll through.

Live: https://vanilla-motion.com/horizontal-sticky-stack/ · Tuning app: https://vanilla-motion.com/horizontal-sticky-stack/app/ · Code reference: https://vanilla-motion.com/horizontal-sticky-stack/skill.md · Params: https://vanilla-motion.com/horizontal-sticky-stack/params.json

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-*`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) — 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.

> ▶ [Live demo](https://vanilla-motion.com/horizontal-sticky-stack/embed/first-stack/) · [open in the tuning app](https://vanilla-motion.com/horizontal-sticky-stack/app/)

## 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.

> ▶ [Live demo](https://vanilla-motion.com/horizontal-sticky-stack/embed/static-layout/) · [open in the tuning app](https://vanilla-motion.com/horizontal-sticky-stack/app/)

## Step 3: Sticky

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