CSS sibling-index() Enables Performant Spiral Scrollytelling

Spiral Scrollytelling in CSS With sibling-index()

Lee Meyer accepted a challenge to create a text spiral animation using modern CSS. This CSS-driven approach demonstrates superior performance compared to JavaScript-based solutions, particularly on mobile devices.

Why This Matters

JavaScript-based scrollytelling often encounters performance limitations, especially on mobile, leading to degraded experiences or features being gated. Sites may sacrifice parallax effects or entire compositions to maintain usability. This CSS-native approach, leveraging features like sibling-index(), offers a path to achieving complex, performant animations without the main-thread overhead of JavaScript, potentially making advanced interactive web experiences more accessible across devices.

The sibling-index() function, though still awaiting full browser support, promises to unlock a new era of CSS-driven animations. By allowing developers to style elements based on their position within a sibling group, it directly addresses limitations previously requiring JavaScript. This shift signifies a move towards more declarative and performant web animations, reducing reliance on client-side scripting for effects that can be handled natively by the browser’s rendering engine.

Key Insights

• JavaScript scrollytelling sites admitted to “ran into real limits” and “chose to gate phones to protect the first impression” due to performance issues.
• A text vortex section was deemed “incredibly difficult to pull off using this same technique without incurring an astronomical performance impact” if applied per character.
• The sibling-index() and sibling-count() CSS functions enable gradual property adjustments (e.g., radius, rotation, scale) based on an element’s index.
• CSS trigonometric functions can be used for circular arrangements, while sibling-index() simplifies spiral calculations.
• Individual character animations like fade-in can be staggered using animation-range-start and the ratio of sibling-index() to sibling-count().

Working Examples

JavaScript snippet to split text into individual characters (divs) and replace spaces with a special character for independent positioning.

const el = document.querySelector(".vortex");
el.innerHTML = el.innerHTML.replaceAll(/\s/g, '⠀');
new SplitText(".title", { type: "chars", charsClass: "char" });

CSS for the vortex container and individual characters, utilizing sibling-index() and sibling-count() for spiral positioning, scaling, rotation, and staggered fade-in animations tied to scroll.

.vortex {
position: fixed;
left: 50%;
height: 100vh;
animation-name: vortex;
animation-duration: 20s;
animation-fill-mode: forwards;
animation-timeline: scroll();
}
.char {
--radius: calc(10vh - (7vh/sibling-count() * sibling-index()));
--rotation: calc((360deg * 3/sibling-count()) * sibling-index());
position: absolute !important;
top: 50%;
left: 50%;
transform: rotate(var(--rotation))
translateY(calc(-2.9 * var(--radius)))
scale(calc(.4 - (.25/(sibling-count()) * sibling-index())));
animation-name: fade-in;
animation-ranger-start: calc(90%/var(sibling-count()) * var(--sibling-index()));
animation-fill-mode: forwards;
animation-timeline: scroll();
}

Practical Applications

• Company/system: CSS-Tricks article demonstrating text spiral animation. Behavior: Animates text characters in a spiral based on scroll position using sibling-index().
• Use case: Creating performant, scroll-driven animations for text or elements. Behavior: Achieves complex visual effects without JavaScript, improving mobile performance.
• Pitfall: Reliance on experimental CSS features like sibling-index(). Consequence: Potential lack of browser support (e.g., Firefox) requiring fallbacks or limiting reach.
• Use case: Enhancing user engagement with dynamic visual narratives. Behavior: Staggered fade-ins and scaling of elements create a compelling vortex effect.

References:

• https://css-tricks.com/spiral-scrollytelling-in-css-with-sibling-index/