Lee accepts a challenge: arranging text in a spiral that animates as a vortex on scroll... all in CSS.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

A tutorial demonstrating how to create a text vortex scrollytelling effect using modern CSS features, specifically the sibling-index() function and scroll-driven animations. The technique arranges individual characters in a spiral that animates smoothly on scroll, addressing performance limitations of JavaScript-based approaches. While minimal JavaScript is used to split text into individual character divs, all animation logic is handled purely in CSS using sibling-count() and sibling-index() to calculate gradual property changes for rotation, scale, and positioning.

Spiral Scrollytelling in CSS With sibling-index()

Spiral and fade the elements using sibling-index() and sibling-count()