Scrollytelling on Steroids With Scroll-State Queries

Scrollytelling on Steroids With Scroll-State Queries

CSS-Tricks introduces non-linear scrollytelling using scroll-state queries, enabling interactive storytelling through horizontal scrolling. The technique leverages Chrome’s experimental CSS features to create a choose-your-own-adventure web experience.

Why This Matters

Scroll-state queries simplify complex UI patterns like scroll shadows and parallax effects, which previously required verbose JavaScript hacks. For example, Kevin Hamer’s 2025 demo showed scroll shadows in CSS without JavaScript, reducing development cost and complexity. However, reliance on experimental features like scroll-state risks limited browser support and potential fragility in production environments.

Key Insights

• “Scroll-state queries simplify scroll shadows, previously requiring complex hacks (Kevin Hamer, 2025)”
• “Sagas over ACID for e-commerce”: Scroll-state enables conditional styling based on scroll direction, ideal for branching narratives
• “CSS-Tricks used scroll-state queries for non-linear scrollytelling in a pixel-art adventure demo”

Working Example

.evil-twin {
  transform: rotateY(180deg);
  filter: invert(24%) sepia(99%) saturate(5431%) hue-rotate(354deg) brightness(93%) contrast(122%);
  background-image: url('spritesheet.png');
}
.spawn-point {
  position: absolute;
  left: 400vw;
  scroll-initial-target: nearest;
}
@container scroll-state((scrollable: left)) {
  body {
    overflow-y: hidden;
  }
}

Practical Applications

• Use Case: CSS-Tricks’ pixel-art demo uses scroll-state to create a branching narrative with horizontal scrolling
• Pitfall: Overreliance on experimental CSS features may break in non-Chromium browsers or future updates

References:

• https://css-tricks.com/scrollytelling-on-steroids-with-scroll-state-queries/

---