design

scroll-timeline и view(): анимация, привязанная к скроллу страницы

scroll-timeline и view(): анимация, привязанная к скроллу страницы

Scroll-driven animations используют scroll-timeline и view-timeline, чтобы привязать @keyframes к позиции скролла или видимости блока.

Типичный кейс — индикатор прогресса чтения статьи и reveal секций на лендинге.

- [Scroll-driven animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations) — Timeline и привязка.

- [Animate on scroll — web.dev](https://web.dev/articles/scroll-driven-animations) — scroll() и view().

---

## Доступность

Уважайте prefers-reduced-motion — отключайте timeline-анимации.

beforetoggle: хук жизненного цикла popover

Аналитика до открытия панели.

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.