Scroll-driven анимации в CSS постепенно выходят на новый уровень.

Раньше для анимаций при прокрутке почти всегда использовали JavaScript: Intersection Observer, GSAP, обработчики scroll-событий и сложную синхронизацию состояния. Теперь браузеры начинают предлагать нативный подход.

Новые CSS-возможности вроде animation-timeline, view() и обсуждаемого animation-trigger позволяют запускать анимации в момент появления элемента во viewport — без постоянного «scrubbing», когда прогресс анимации жёстко привязан к позиции скролла.

Что это даёт на практике:

➖меньше JavaScript-кода
более стабильный FPS
➖снижение нагрузки на main thread
➖декларативное описание поведения прямо в CSS
➖упрощение поддержки UI-анимаций

Подход особенно хорошо подходит для reveal-анимаций, появления карточек, секций лендингов и контентных интерфейсов.

Фактически frontend постепенно движется к модели, где браузер сам управляет жизненным циклом анимаций, а разработчик описывает только правила и состояния.

👉 @web_craft