{"id":390205,"date":"2025-12-02T09:47:14","date_gmt":"2025-12-02T16:47:14","guid":{"rendered":"https:\/\/css-tricks.com\/?p=390205"},"modified":"2025-12-04T12:14:30","modified_gmt":"2025-12-04T19:14:30","slug":"scrollytelling-on-steroids-with-scroll-state-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scrollytelling-on-steroids-with-scroll-state-queries\/","title":{"rendered":"Scrollytelling on Steroids With Scroll-State Queries"},"content":{"rendered":"\n
\nRead you a story? What fun would that be? I’ve got a better idea: let’s tell a story together.<\/p>\n\u2014 Photopia<\/a> <\/a>by Adam Cadre<\/a><\/cite><\/blockquote>\n\n\n\n
Do you think of scrolling as a more modern way of reading than turning pages in a book? Nope, the concept originated in ancient Egypt, and it\u2019s older than what we now classify as books. It\u2019s based on how our ancestors read ancient physical scrolls<\/a>, the earliest form of editable text in the history of writing. I am Jewish, so I remember my earliest non-digital scrolling experience was horizontally scrolling the Torah<\/a>, which can be more immersive<\/a> than traditionally scrolling a webpage. The physical actions to navigate texts have captured the imagination of many a storyteller, leading authors to gamify the act of turning pages<\/a> and to create stories that incorporate the physical actions of opening a book and turning pages<\/a> as part of the narrative<\/a>. However, innovative experiences using non-standard scrolling haven\u2019t been explored as thoroughly.<\/p>\n\n\n\n
Photo by Taylor Flowe<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n I can sympathize with those who<\/a> dismiss scrollytelling<\/a> as a gimmick: it can be an annoyance if it\u2019s just for the sake of cleverness, but my favorite examples I\u2019ve seen over the years tell stories we couldn\u2019t otherwise<\/a>. There\u2019s something uniquely immersive about stories driven by a mechanic that has lived in our species’ collective muscle memory since ancient days.<\/p>\n\n\n\n
Still unconvinced of the value of scrollytelling? Alright, hypothetical annoying skeptic, let\u2019s first warm up with some common use cases for scroll-based styling.<\/p>\n\n\n
Popular scroll-based designs we can simplify with modern CSS<\/h3>\n\n\n
It\u2019s awesome that Chrome has solid support<\/a> for native scroll-driven animations without requiring JavaScript, and we see that both Safari<\/a> and Firefox<\/a> are actively working on support for the new scroll-driven standards. These new features facilitate optimized, smooth scroll-driven animations. The support via pure CSS syntax makes scroll-driven animation a more approachable option for designers who may be more comfortable with CSS than with the equivalent JavaScript<\/a>.<\/p>\n\n\n\n
Indeed, even though I am a full-stack developer who is supposed to know everything<\/a>, I found having scroll-driven animation built into the browser and available with a few lines of CSS gets my creativity flowing<\/a>, inspiring me to experiment<\/a> more than if I had to go through hoops of a proprietary library<\/a> and writing JavaScript, which in the past might include messing with intersection observer<\/a> and fiddly code.<\/p>\n\n\n\n
If animation timelines weren\u2019t enough, Chrome has now introduced support for CSS carousel<\/a>,
scroll-initial-target<\/code><\/a>, andscroll-state<\/code> queries<\/a>\u2014all of which provide opportunities to control scrolling behaviors in CSS and style all the things based on scrolling.<\/p>\n\n\n\nIn my opinion,
scroll-state<\/code> is more of an evolutionary than revolutionary addition to the growing range of scroll-related CSS features. Animation timelines are so powerful that they can be hacked to achieve many of the same effects we can implement withscroll-state<\/code> queries. Therefore, think ofscroll-state<\/code> as a highly convenient, simplified subset of what we can do in more verbose hacky ways with animation timelines and\/or view timelines.<\/p>\n\n\n\nSome examples of effects
scroll-state<\/code> simplifies are:<\/p>\n\n\n\n\n
- Before
scroll-state<\/code> queries existed, you could hack view progress timelines<\/a> to create scroll-triggered animations, but we now have snapped<\/a>scroll-state<\/code> queries<\/a> to achieve similar effects<\/a>.<\/li>\n\n\n\n- Before
snapped<\/code> queries existed, Bramus demonstrated a hack to simulate a hypothetical:snapped<\/code><\/a> selector using scroll-driven animations.<\/li>\n\n\n\n- Before
scrollable<\/code> queries<\/a> existed, Bramus showed how we could do similar things<\/a> usingscroll-timeline.<\/code><\/li>\n<\/ol>\n\n\n\nTake a moment to appreciate that Bramus is from the future, and to reflect on how
scroll-state<\/code> can simplify common UI patterns, such as scroll shadows<\/a>, which Chris Coyier said might be his \u201cfavorite CSS trick of all time.\u201d This year, Kevin Hamer showed<\/a> howscroll-timeline<\/code> can achieve scroll shadows in CSS with fewer tricks. It\u2019s excellent, but the only thing better than clever CSS tricks is that scroll shadows no longer require a trick at all. Hacking CSS is fun, but there is something to be said for that warm fuzzy feeling that CSS was made just for your use case. This demo<\/a> from the Chrome blog shows how scroll shadows and other visual affordances are easy to implement withscroll-state<\/code>.<\/p>\n\n\n\nBut the popularity of Kevin\u2019s article suggests that normal, sane people will gravitate to practical use cases for the new CSS scroll-based features. In fact, a normal and sane author might end the article here. Unfortunately, as I revealed in a previous article<\/a>, I have been cursed by a spooky shopkeeper who sells CSS tricks at a haunted carnival, so I now roam the earth attempting the unthinkable with pure CSS.<\/p>\n\n\n
Decision time<\/h3>\n\n\n
As you reach this paragraph in the article, you realize that when you scroll, it fast-forwards reality. Therefore, after we end the discussion of scroll shadows, the shadows swallow the world outside your window, except for two glowing words hovering near your house: CSS TRICKS. You wander out through your front door and meet a street vendor standing beneath the neon sign. The letters give her multiple shadows as if she has thrown them down like discarded masks, undecided about which shade of night to wear. On the table before her lies a weathered scroll. It unrolls on its own, whispering misremembered fragments from a forgotten CSS-Tricks article<\/a>: \u201cA scroll trigger is a point of no return, like a trap sprung once the hapless user scrolls past a certain point.\u201d<\/em><\/p>\n\n\n\n
The neon flickers like a glitch, revealing another of the shopkeeper\u2019s faces: a fire demon doppleganger of yourself who is the villain of the CodePen we\u2019ll descend into if you scroll further.<\/em><\/p>\n\n\n\n
“Will you continue?” the fire demon hisses. “Will you scroll deeper into the madness at the far edges of CSS?<\/em><\/p>\n\n\n
Non-linear scrollytelling<\/h3>\n\n\n
Evidently, you are game to play with fire, so check out the pure CSS experiment below, which demonstrates a technique I call \u201cnonlinear scrollytelling,\u201d in which the user controls the outcome of a visual story by deciding which direction to scroll next. It\u2019s a scrolling Choose Your Own Adventure<\/em>. But if your browser is less adventurous than you are, watch the screen recording instead. The experiment will only work on Chromium-based browsers for now, because it relies on
scroll-state<\/code>,animation-timeline<\/code>,scroll-initial-target<\/code> and CSS inline conditionals<\/a>.<\/p>\n\n\n\n