Scroll-state queries and the case for nonlinear storytelling

Scrolling is ancient technology. Long before codex-style page turning, readers navigated physical scrolls — the Torah being a prime example. The web has mostly treated vertical scroll as a linear reading mechanic, with page turns and navigation as the meta-layer for branching. But the physical action of scrolling carries its own storytelling potential that, until recently, required significant JavaScript gymnastics to exploit.

Modern CSS: scroll-driven animations and beyond

Chrome’s native support for scroll-driven animations brought timeline-based effects to CSS, with Safari and Firefox actively working on implementations. The appeal is obvious for designers who prefer CSS over the callback-heavy equivalent JavaScript: declarative syntax, optimized performance, easier experimentation. Scrolling through a typical page can now trigger parallax, reveal animations, and visual effects using a few lines of stylesheet rather than an intersection observer boilerplate.

Chrome has continued this curve by introducing three related features: CSS carousels, the scroll-initial-target property, and scroll-state queries. Together they promise to systematize what previously were hacks.

scroll-state as a convenience layer

scroll-state is an evolutionary rather than revolutionary step. Most of its uses can already be achieved with scroll-driven animations — but artificially. For instance, pre-scroll-state designers used view progress timelines to fake :snapped selectors and to detect when a container had reached a scroll boundary. The demonstrations by Bramus and others in that era proved that timeline-based hacks could get there, but the CSS was verbose and fragile.

The browser is now recognizing these needs directly. The visual payoff is in the patten it simplifies:

  • Snapped queries to run an animation a single element is snapped to.
  • Scrollable queries to determine whether an element can still scroll in a particular direction.
  • Scroll shadows, deservedly famous as Chris Coyier’s favorite CSS trick, no resorting to an extra repeated shadow or hero-style cover. A modern implementation targets scroll-state and checks out cleanly.

Putting scroll-state to an untamed use case

Case studies like this demonstration show how far CSS can go when you stop using scroll-driven features only for visual garnish and start using them to structure a decision-based narrative. In this experiment — built purely with CSS, assuming the features land in a support gap — the user loads the page and is dropped in the middle of the layout, unsure which direction to scroll next. This is a scrollytelling analogy of a branching quest.

Initial scroll position via CSS

The user arrives not at the top, but in the middle, from which they can decide to go left (retreat) or right (face the antagonist). This is made possible without JavaScript: 



.spawn-point {
  position: absolute;
  left: 400vw;
  scroll-initial-target: nearest;
}

p>

Previously the developer would have to orchestrate a scroll-snap or use it hacks to bring the starting scroll position into the center. The approach is reliant on the emerging scroll-initial-target property, which slashes away needless complexity.



Directing movement with scroll-state and animation-timeline


The most effective demonstration of the CSS methodology is positioning a "scroller" section horizontally rather than vertically. In the test setup, when the character scrolls left, surrounding layers shift a parallax accordingly via animation-timeline. These use cases feel straightforward enough.



A responsive CSS way to govern the passage


At a climax, a scroll-state query checks whether the main element has been scrolled to the leftmost point. At that point, the layout flips the axis instantly which lets the player go vertical to climb. Without scroll-state, similar detection would still be possible — view timelines and old custom toggles it behind- the code expands considerably.



State and weapon collection


For remembering the choice inside a conversational structure, the example keeps a small state toggle (whether the character collected a sword). Because it uses a pause-style hack via keyframes, it shows a known limitation: timers could drift, state can flicker. Still, within the build, this simpler method beats running a whole keyframe-toggle to manage your own inheritance.



The climbing animation, so distinctly a vertical motion, that requires another author of scroll-state to activate itself, gets its own anonymous animation-timeline to yield a synchronous movement based upon the vertical narrative.



The scoundrel switch


Ultimately, fire fails. The interactions between the characters are detected by collision-check mechanism the creator developed originally, now only triggered by meeting the person causing it. At the crash point, the entire scroll vanishes, an endgame described according to the states you visited.



Building bloated fancy sites versus building right


You might be a skeptical-scrolling fan: those flashy websites feel intentionally manipulative. For many normal cases, they are fads. Nonlinear scroll interaction is ideal for one type of narrative, not every page.

Though safe use extends beyond make-believe: the horror-resilience campaign by Prévenir provides a real-world example

that aligns with this scroll-driven intimacy. Such campaigns underline that horizontal movement need not be novelty — tailored stories can benefit from its unnaturalness, if you are willing to meet history’s readerly muscle memory.

Technical edge cases beyond missing browser variety mean JavaScript remains the companion – by choice or coercion. Storing status stays in CSS requiring awkward CSS quirks. Browsers advance, though. With modern web scroll events landing, they allow a full app’s need of interactivity and sounds.

For the biggest pushes, CSS is nearly sufficient, only if code libraries manage deeply with content of real weight, even while we craft path into forking gardens as possible.