CSS Sprite-Based Flip Carousel Using Scroll-Timeline

🧩 Overview This project is a pure CSS-based dynamic interactive book that simulates page-flipping animations using cutting-edge features available in modern Chrome (134–135+). It seamlessly combines several powerful CSS technologies to create a fully scrollable, sprite-driven animated experience resembling a book with turning pages.

🚀 Core Features

📚 Book-like Page Flipping

Each "slide" or section of the book corresponds to a virtual page. The animation mimics a realistic flipping effect using sprite sheets and scroll-driven animations.


🔧 Technologies Used

  • Scroll Snap
  • View Timeline + Scroll Timeline
  • Sprite Sheets (mod, round)
  • Dynamic Sizing
  • Dynamic Sprite Calculation

🧠 Dynamic Behavior

All animations are automatically adjusted when changing the number of slides via the --slides variable. Frame

count, sprite layout, and total animation length adapt based on user-defined CSS variables. The animation is responsive to scroll progress using scroll-timeline and is scoped per element using timeline-scope.


🖼️ Visual Layers

The book page uses a layered sprite system: One sprite sheet per page flip animation Positioned and animated via background-image The correct frame is selected based on scroll or button input


🧪 Browser Support

Requires Chrome 134+ for experimental CSS features like scroll-timeline, animation-timeline, ::scroll-button, and ::scroll-marker Best viewed with flags enabled or origin trials if needed

📦 Use Cases

Digital storytelling
Visual novels
Portfolio presentations
Interactive learning materials


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.