📈 Анимации по скролу — Scroll Progress Timelines
У меня вообще не очень дела с CSS анимациями, но я наконец-то дочитал статью An Introduction To CSS Scroll-Driven Animations и решил рассказать, что такое Scroll Progress Timelines, и показать свою небольшую демку.
Обязательно откройте статью — там крутые примеры! Только посмотрите на эту шикарную демку с сардинами с шпротами сардинами 🐟.
Если вы писали простейшие анимации, вы знаете, что обычно нужно прописать длительность цикла анимации:
.element { animation-duration: 2s; }
Scroll Progress Timelines позволяют вместо времени использовать позицию скроллбара элемента. То есть, вы скроллите страницу вниз — анимация воспроизводится вперёд, скроллите вверх — прокручивается назад 🔁
Самый очевидный пример — прогресс чтения статьи, который растёт, пока вы пролистываете страницу.
Для этого достаточно указать:
animation-timeline: scroll(<scroller> <axis>);
