Анимации и переходы
- Стоимость
- от 150 000 ₽
- Срок
- 2–4 недели
- Опыт
- 100+ проектов · 10+ лет · 9+ стран
Анимации на прокрутке, появление текста и плавные переходы между страницами
- GSAP
- Nuxt
- Figma
Базовый набор. Под задачу и требования проекта подключаем и другие инструменты.
Хорошая анимация не украшает, а ведёт взгляд: текст появляется по мере чтения, блоки собираются при прокрутке, а переход между страницами не обрывает впечатление белым экраном.
Делаем анимации на GSAP и переходы между страницами, которые работают плавно и не мешают скорости и доступности.
Что делаем
- Появление текста по буквам, словам и строкам
- Анимации блоков и изображений при прокрутке, параллакс
- Плавные переходы между страницами без перезагрузки
- Микроанимации кнопок, ссылок и курсора
- Учёт настройки «уменьшить движение»
Когда движение мешает, а не помогает
Анимации на сайте дёргаются при прокрутке
Анимируем только transform и opacity, привязку к скроллу строим на ScrollTrigger с плавной прокруткой. В профайлере браузера проверяем, что кадры не проседают.
Всё на странице выезжает и прыгает, и это раздражает
Составляем словарь движения: длительности, кривые, направления, задержки. Анимируем то, что помогает чтению, а остальное оставляем в покое.
Переход между страницами обрывается белой вспышкой
Делаем переходы на уровне роутера: старая страница уходит, новая собирается, пока грузятся данные. Скролл и фокус восстанавливаются, кнопка «назад» работает.
Текст появляется так медленно, что его не дожидаются
Ограничиваем время появления и запускаем анимацию чуть раньше, чем блок дойдёт до центра экрана. Не читатель ждёт текст, а текст — читателя.
После анимаций сайт провалил проверку доступности
Учитываем prefers-reduced-motion, не прячем контент от экранных дикторов и не блокируем прокрутку. Разбивку текста по буквам делаем так, чтобы слово читалось целиком.
Когда стоит заняться анимацией
Подойдёт, если
- Сайт выглядит статично на фоне конкурентов, хотя структура и тексты в порядке
- Есть анимации в Figma или After Effects, которые нужно перенести в код
- Сайт на Nuxt, Next или другом SPA-фреймворке, и нужны переходы без перезагрузки
- Важно, чтобы движение было в одном стиле на всех страницах
Не подойдёт, если
- Нужна 3D-сцена или живой фон на шейдерах — это задача для 3D и шейдеров
- Структура и тексты ещё не готовы — сначала соберём корпоративный сайт, анимации добавим потом
Движение со смыслом
Единый ритм
Тайминги и кривые задаём для всего сайта, поэтому анимации ощущаются частью одного характера.Движение ведёт взгляд
Сначала решаем, что посетитель должен заметить, и только потом — как это показать. Анимация без задачи не попадает на сайт.Плавно и на телефоне
Анимируем то, что браузер рисует быстро, и проверяем на реальных телефонах, а не только на мощном ноутбуке.
Как мы работаем
- 01
Сценарий движения
2–3 дняРешаем, что и как движется: появление блоков, текст, переходы. Задаём общие кривые и скорости.
Итог этапа Карта анимаций по страницам с параметрами движения - 02
Прототипы
2–4 дняДелаем ключевые анимации в браузере, чтобы согласовать характер движения до разработки.
Итог этапа Демо ключевых анимаций по ссылке - 03
Анимации на страницах
5–8 днейВнедряем анимации на прокрутке и появление текста на GSAP и привязываем их к вёрстке сайта.
Итог этапа Анимации на тестовой версии сайта - 04
Переходы между страницами
2–3 дняДелаем плавную смену страниц без белой вспышки, с сохранением прокрутки и истории браузера.
Итог этапа Переходы между страницами на тестовой версии - 05
Проверка и запуск
1–2 дняПроверяем плавность на слабых устройствах и режим уменьшенного движения, затем публикуем.
Итог этапа Опубликованные анимации и 3 месяца гарантии на исправление ошибок
Что подготовить для анимаций
- Ссылки на сайты, где движение вам нравится, и где раздражает
- Макеты или прототипы анимаций, если они уже нарисованы
- Доступ к репозиторию и описание стека сайта
- Список страниц и блоков, которые важнее всего оживить
- Браузеры и устройства, которые обязательно поддерживать
Разбор сайта и референсов
На получасовом звонке смотрим ваш сайт и примеры и решаем, где движение поможет чтению. После присылаем список анимаций, сроки и оценку.
Сайт кажется
статичным?
Добавим появление текста, анимации при прокрутке и переходы между страницами без белого экрана — в едином ритме и без потери скорости.
Анимируем только то, что браузер рисует дёшево, и проверяем плавность на слабых устройствах.
От 150 000 ₽. Итог зависит от числа страниц и блоков с анимацией, сложности сценариев на прокрутке и от того, нужны ли переходы между страницами без перезагрузки. Анимацию для готового сайта оцениваем после разбора его вёрстки.
Да, большинство эффектов добавляются поверх существующей вёрстки.
Если в системе включено «уменьшить движение», анимации становятся мягче или отключаются, а контент остаётся доступным.
На GSAP и CSS, переходы между страницами — средствами фреймворка, без перезагрузки.