Scroll-Driven Animations — css анимации на scroll без js
Josh Comeau показал, как новый Animation Timeline API позволяет привязывать анимации напрямую к скроллу через CSS. С помощью animation-timeline, animation-range и view() можно делать reveal effects, progress bars и parallax без IntersectionObserver или scroll listeners.
Главная идея в том, что scroll становится полноценным timeline для интерфейса. Это заметно снижает сложность реализации и делает подобные эффекты более нативной частью платформы, продолжая тренд на постепенный перенос сложного UI из JavaScript в CSS.
Josh Comeau показал, как новый Animation Timeline API позволяет привязывать анимации напрямую к скроллу через CSS. С помощью animation-timeline, animation-range и view() можно делать reveal effects, progress bars и parallax без IntersectionObserver или scroll listeners.
Главная идея в том, что scroll становится полноценным timeline для интерфейса. Это заметно снижает сложность реализации и делает подобные эффекты более нативной частью платформы, продолжая тренд на постепенный перенос сложного UI из JavaScript в CSS.
