Код получался хрупким, а анимации дёргались на каждом рендере. CSS Scroll-Driven Animations меняют подход: одно свойство animation-timeline: scroll() привязывает обычные @keyframes к позиции скролла. Без JS, без библиотек, с рендерингом вне основного потока. В статье разбираем два типа таймлайнов — scroll() и view() — и показываем, как привязать анимацию к странице, контейнеру или видимости элемента. #css #baseline 🚀 Читать статью
Параллакс, прогресс-бар чтения, появление элементов при прокрутке — раньше для всего этого нужен был JavaScript и обработка события scroll. Код получался хрупким, а анимации дёргались на каждом рендере.
CSS Scroll-Driven Animations меняют подход: одно свойство animation-timeline: scroll() привязывает обычные @keyframes к позиции скролла. Без JS, без библиотек, с рендерингом вне основного потока. В статье разбираем два типа таймлайнов — scroll() и view() — и показываем, как привязать анимацию к странице, контейнеру или видимости элемента. #css #baseline
