Современные анимации: Scroll-Driven Animations и View Transition API. Как оживить сайт и удержать пользователя

Последние несколько лет я активно экспериментирую с анимациями в вебе. Современные пользователи ждут от сайтов не только функциональности, но и эмоций. Плавные переходы между страницами, параллакс-эффекты, интерактивные элементы всё это превращает обычный интерфейс в живой цифровой опыт. В этой статье я расскажу о двух ключевых технологиях 2024-2025 годов: Scroll-Driven Animations и View Transition API. Вы узнаете, как их внедрить, увидите примеры кода, таблицы сравнения и мои личные рекомендации.

Scroll-Driven Animations: анимации, управляемые скроллом

Что это и зачем нужно?

Scroll-Driven Animations (SDA) это анимации, которые запускаются и контролируются скроллом страницы. Они идеальны для:

• Параллакс-эффектов
• Постепенного появления блоков
• Интерактивных историй с прокруткой

Раньше такие эффекты реализовывали через scroll event listener, что било по производительности. Теперь есть нативное API!

Пример: параллакс с использованием CSS и JavaScript

.parallax-element {  
  width: 200px;  
  height: 200px;  
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);  
  position: relative;  
  animation: parallax linear;  
  animation-timeline: scroll();  
}  

@keyframes parallax {  
  from { transform: translateY(0); }  
  to { transform: translateY(300px); }  
}

Или через JavaScript:

const element = document.querySelector('.parallax-element');  
const animation = element.animate(  
  [  
    { transform: 'translateY(0)' },  
    { transform: 'translateY(300px)' }  
  ],  
  {  
    timeline: scrollTimeline({  
      source: document.documentElement  
    })  
  }  
);

Инструкция:

1. Задайте animation-timeline: scroll() в CSS или создайте ScrollTimeline в JS.
2. Свяжите анимацию с контейнером (по умолчанию вся страница).
3. Настройте ключевые кадры (keyframes) для трансформаций.

View Transition API: процесс переходов между страницами

Проблема традиционных переходов

Раньше плавные переходы между страницами требовали использования SPA (например, React Router) или сложных скриптов. View Transition API упрощает это даже для MPA (многостраничных сайтов)!

Пример: кроссфейд между страницами

// Включите поддержку в CSS  
@supports (view-transition-name: none) {  
  ::view-transition-old(root),  
  ::view-transition-new(root) {  
    animation: fade 0.5s;  
  }  
}  

// В JavaScript  
document.addEventListener('click', async (e) => {  
  if (e.target.closest('a')) {  
    e.preventDefault();  
    const href = e.target.href;  
    await document.startViewTransition(() => {  
      window.location = href;  
    });  
  }  
});

Как это работает:

1. Браузер делает скриншот текущей страницы.
2. Загружает новую страницу.
3. Запускает анимацию перехода между скриншотами.

Сравнение технологий

Мои рекомендации

1. Комбинируйте технологии. Например, используйте View Transition для перехода на страницу с параллакс-анимациями.
2. Тестируйте на слабых устройствах. Анимации могут тормозить на старых смартфонах.
3. Не перегружайте. 2-3 анимации на экране достаточно.

Scroll-Driven Animations и View Transition API это не просто «фишки», а инструменты для создания глубокого пользовательского опыта. Добавьте плавное появление карточек товаров или кроссфейд между разделами сайта. Постепенно внедряйте сложные сценарии и ваши пользователи точно это оценят.