Scroll-Linked Animations
summary
A Cover Flow clone is built and works using HTML and CSS only — an inline‑block horizontal list with overflow scroll, CSS scroll snapping to center items, and webkit‑box‑reflect for reflections. The rotation uses keyframes plus the new scroll-linked animations primitives: a named view timeline and animation-timeline to drive keyframe progress on the compositor (off‑main thread). Demo runs in Chromium behind a flag, Firefox is in progress, WebKit lacks support; a polyfill and CodePen collection are provided.
AI-written summary · about
chapters (5)
related talks
36mScroll-Driven Animations with CSS
29mScroll linked Animations with CSS
40mThe Future with Scroll-Driven Animations in CSS
53mScroll-Enhanced Experiences
39mModern CSS for Creative Developers
36mYou might not need JS
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
38mReturn to Web Animation Wonderland