"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.""
"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."
"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. Therefore, as a fallback for the CodePen below, you can also watch the video of the screen recording."
Many JavaScript scrollytelling projects perform well on desktop but encounter limits on mobile, losing parallax and chopping compositions, leading creators to gate phones to protect first impressions. Per-character text effects commonly cause astronomical performance impacts when implemented on the main thread. Modern CSS features such as scroll-timeline() and sibling-index() offer the potential to offload animation from JavaScript and enable smoother animations. A pragmatic approach uses a small script only to split text into per-character elements while relying on pure CSS for the spiraling animation tied to scroll. Browser support gaps require fallbacks such as video or gated functionality.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]