CSS-Only Spiral Scrollytelling: Breaking JavaScript Dependencies with sibling-index()

The web's scrollytelling landscape is shifting. What once required JavaScript libraries like Scrollama.js or D3 can now be achieved with pure CSS—and the results are surprisingly sophisticated.

Lee's spiral scrollytelling tutorial demonstrates something remarkable: arranging text in animated spirals that morph into vortex effects during scroll, all without touching JavaScript. The secret weapon? The experimental sibling-index() function combined with scroll-driven animations.

The sibling-index() Breakthrough

Traditionally, positioning elements based on their order required JavaScript to iterate through DOM nodes. The sibling-index() function changes this by returning a 1-based index of elements among siblings directly in CSS:

1.spiral-text > * {
2  --index: sibling-index();
3  --angle: calc(var(--index) * 15deg);
4  transform: rotate(var(--angle)) translate(20vmin) rotate(calc(var(--angle) * -1));
5}

This mathematical approach enables spiral positioning through polar coordinates—each element rotates by an incremental angle, translates outward by a radius, then counter-rotates to keep text readable. It's elegant geometry expressed in CSS variables.

Scroll-Driven Animation Integration

The spiral becomes dynamic through CSS scroll timelines. Instead of listening for scroll events in JavaScript, the browser natively links animation progress to scroll position:

1.spiral-container {
2  container-type: inline-size;
3  height: 200vh; /* Extended height for scroll range */
4}
5
6.spiral-text > * {
7  animation: spiral-vortex linear both;
8  animation-timeline: scroll(root block);

The animation-timeline: scroll(root block) binds animation progress to vertical scroll position. As users scroll, text spirals inward while rotating faster, creating that hypnotic vortex effect.

Performance and Accessibility Wins

This CSS-only approach delivers several advantages over JavaScript solutions:

Bundle Size: No external libraries or scroll event listeners means faster initial loads and better Lighthouse scores.

60fps Performance: Browser-native animations leverage the compositor thread, avoiding main thread blocking that plagues JavaScript scroll handlers.

Accessibility Integration: CSS respects user preferences automatically:

1@media (prefers-reduced-motion: reduce) {
2  .spiral-text > * {
3    animation: none;
4    transform: none;
5    position: static;
6  }
7}

Maintainability: Declarative CSS is easier to debug than imperative scroll calculations. Animation inspector tools work natively.

Browser Support Reality Check

The experimental nature requires pragmatism. sibling-index() and scroll-driven animations work in Chrome/Edge with flags enabled, but Firefox and Safari support varies. For production sites, consider progressive enhancement:

1@supports (animation-timeline: scroll()) {
2  /* Enhanced spiral animations */
3}
4
5@supports not (animation-timeline: scroll()) {
6  /* Fallback to static spiral or simplified effects */
7}

For critical scrollytelling, JavaScript libraries remain safer choices until browser support stabilizes.

Beyond Spirals: Layout Possibilities

The sibling-index() pattern extends beyond decorative effects. Consider:

• Dynamic Grid Layouts: Position cards in responsive grids using nth-child() math without media queries
• Carousel Positioning: Arrange slides with CSS-calculated transforms
• Data Visualization: Create pure CSS charts where bar heights derive from sibling position
• Timeline Animations: Stagger entrance effects based on element order

Implementation Strategy

For teams wanting to experiment:

1. Start Simple: Test basic sibling-index() positioning before adding scroll animations

2. Container Queries: Use container-type: inline-size for responsive spiral sizing

3. Performance Isolation: Add contain: layout style to animated containers

4. Debugging: Chrome DevTools' animation inspector visualizes scroll timelines

5. Fallback Planning: Design experiences that degrade gracefully

Why This Matters

This isn't just a clever CSS trick—it represents the web platform's evolution toward more capable native APIs. As scroll-driven animations and sibling-index() gain support, teams can reduce JavaScript dependencies while improving performance and accessibility.

For portfolios, marketing sites, or data stories, pure CSS scrollytelling offers a compelling middle ground between static layouts and heavy JavaScript frameworks. The spiral tutorial proves that creative constraints often spark the most innovative solutions.

Start experimenting in Chrome Canary, but keep JavaScript fallbacks ready. The future of scrollytelling is increasingly declarative—and surprisingly mathematical.