Scrollytelling on Steroids With Scroll-State Queries | CSS-Tricks

"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's older than what we now classify as books. It's based on how our ancestors read ancient physical scrolls, 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, which can be more immersive than traditionally scrolling a webpage."

"I can sympathize with those who dismiss scrollytelling as a gimmick: it can be an annoyance if it's just for the sake of cleverness, but my favorite examples I've seen over the years tell stories we couldn't otherwise. There's something uniquely immersive about stories driven by a mechanic that has lived in our species' collective muscle memory since ancient days."

"It's awesome that Chrome has solid support for native scroll-driven animations without requiring JavaScript, and we see that both Safari and Firefox 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."

Scrolling originated in ancient Egypt as physical scrolls predating books and representing the earliest editable text format. Horizontal Torah scrolling exemplifies deep, non-digital immersion distinct from webpage scrolling. Physical navigation gestures inspired storytellers to gamify page turning and integrate book-opening and page-turning actions into narratives, while many non-standard scrolling experiences remain underexplored. Scrollytelling can feel gimmicky when gratuitous, but well-designed examples enable stories that could not otherwise be conveyed and create unique immersion rooted in collective muscle memory. Modern browser work on native scroll-driven standards and CSS-based syntax enables smooth, optimized, designer-friendly scroll-driven animations without JavaScript.

Read at CSS-Tricks