Анимация появления блоков при скролле делается несколькими строками CSS-перехода вместе с Intersection Observer в JavaScript - лёгкий способ, который почти не увеличивает вес страницы. Готовые библиотеки анимаций, которые тянут за собой конкуренты, добавляют 100-300 килобайт и заметно замедляют загрузку на мобильном, поэтому на своих лендингах их не ставлю - хватает нескольких строк своего кода.
На одном проекте библиотека анимаций весила 180 килобайт в сжатом виде и добавляла почти секунду до интерактивности страницы на среднем смартфоне. После замены на CSS-переходы без библиотеки страница стала грузиться на треть быстрее, а визуально эффект появления блоков остался почти таким же.
Из того, что реально стоит делать:
- Появление блока целиком при попадании в область видимости - разделяет длинную страницу на смысловые части.
- Реакция кнопки на наведение и нажатие - подтверждает, что клик засчитался.
- Счётчик цифр (лет на рынке, число заказов) - но только с реальными числами, выдуманная статистика на анимации только заметнее.
Из того, что обычно вредит:
- Параллакс фона - тормозит на слабых процессорах и почти никогда не поднимает конверсию.
- Автопрокрутка карусели - отвлекает, а не помогает.
- Анимация на каждом абзаце и иконке вместо блока целиком - посетитель ждёт эффект вместо чтения текста.
Держите длительность любой анимации меньше 300 миллисекунд: дольше она ощущается как подвисание, особенно на телефоне, где пользователь торопится сильнее, чем за компьютером. И проверяйте результат не в макете на большом мониторе дизайнера, а на реальном бюджетном смартфоне: там браузер сам режет частоту кадров, и то, что плавно на десктопе, на телефоне может дёргаться.