• Confession time: I’ve read about the performance benefits of scroll-timeline() , but when I see an impressive JavaScript scrollytelling site like this one, it makes me question if the performance of old-school, main-thread scrollytelling is all that bad. • The other shoe drops when the creators of that site admit they “ran into real limits,” and “mobile technically works, but it loses parallax and chops compositions,” to the extent that they “chose to gate phones to protect the first impression.” Put another way: they couldn’t get it working on mobile, and it sounds like JavaScript performance may have been one of the culprits. • The creator of another of my favorite scrolling experiments - which also uses JavaScript and also works best on desktop - called out that his text vortex section “would look better if it were applied for each character rather than each word, but that’s incredibly difficult to pull off using this same technique without incurring an astronomical performance impact.” Challenge accepted. • He may have inadvertently created a realistic benchmark test for smoothly animating hundreds of divs based on scrolling. • That’s our cue to see if we can make a lookalike effect using modern CSS features to smoothly spiral every character in a string of text as the user scrolls down. • To give the original text vortex some CSS sibling rivalry, let’s give the new sibling-index() function a whirl, although it is still waiting on Firefox support at the time of writing.

Article Summaries:

  • The article discusses a new CSS‑based scrollytelling technique that animates each character of a string in a spiral as the page scrolls. Using the experimental sibling-index() function, the author replaces JavaScript‑heavy scroll animations with pure CSS, reducing main‑thread load. The post compares this approach to popular JavaScript scrollytelling sites that struggled on mobile, noting that the CSS method offers smoother performance on desktop while still providing a fallback for browsers lacking sibling-index(). The author also shares a minimal script to split text into individual characters, enabling easy experimentation with the effect.

Sources: