Спиннер придуман для операций длиной 0.5–2 секунды. LLMзапрос занимает 4–15 секунд. Многошаговая задача агента — до нескольких минут. За это время спиннер перестаёт работать как индикатор прогресса и становится источником тревоги: «чтото происходит?», «система зависла?», «стоит ли ждать?»
Точка перехода из «помогает» в «мешает» проходит незаметно. Добавил одну анимацию — хорошо. Потом ещё одну. Потом ещё. В какойто момент пользователь начинает ждать пока всё доиграет прежде чем сможет продолжить работу.
AI в анимации 2026 — это не один инструмент. Это несколько разных классов под разные задачи. Смешивать их назначение — самая частая ошибка: ожидать что инструмент для видеогенерации напишет CSSанимацию, или что codeагент создаст иллюстративную анимацию с нуля.
Переход между экранами — самый часто встречающийся motionпаттерн и самый часто ломающий UX. Плохой переход дезориентирует: пользователь не понимает где он был, где он теперь, что произошло.
Можно взять правильный тип анимации, правильный компонент — и всё равно получить чтото механическое или мультяшное. Три параметра определяют насколько анимация ощущается как настоящая: easing, duration, delay.
Интерфейс без анимаций — не нейтральный. Он общается через мгновенные переключения состояний которые мозг с трудом отслеживает. Нажал кнопку — резко оказался на другой странице. Произошло чтото? Где я был? Где я теперь?
Дизайнер сделал красивую анимацию в After Effects. Разработчик получил файл. Дальше начинается боль: GIF слишком тяжёлый, видео не масштабируется, SVG не анимируется нужным образом. Lottie решает это — но только если знать как его готовить. Lottie — формат который конвертирует After Effects-анимации в JSON. Файл весит в 600 раз меньше GIF того же качества, рендерится нативно на вебе, iOS, Android и React Native, масштабируется без потерь. Проблемы начинаются не с форматом, а с тем что никто не объяснил правила на каждом этапе — от дизайнера до деплоя.
Большинство туториалов по Framer Motion учат одно и то же: замени `<div>` на `<motion.div>`, добавь `animate={{ opacity: 1 }}` — готово. Это занимает десять минут, а не вечер. Вечер нужен на другое: понять почему анимации дёргаются, как правильно анимировать выход элемента, как не раздувать бандл и почему варианты — это не синтаксический сахар, а принципиально другой подход к оркестрации. Этот гайд — про то что реально нужно в проекте. Без теории ради теории.
Ещё два года назад этот список был бы коротким. Плавные переходы, keyframe-анимации, базовый hover. Всё серьёзное — в JavaScript. В 2026 году браузер умеет анимировать скролл без IntersectionObserver, переходы между страницами без роутер-библиотек, появление и исчезновение элементов из `display: none` без таймеров, и раскрытие аккордеонов до `height: auto` без измерения `scrollHeight`. Причём поддержка у всех этих фич — кроссбраузерная. Это не значит выбрасывать GSAP или Motion. Это значит знать где браузер справляется сам — и не тащить библиотеку там где она не нужна.
Когда генерируешь сайт через AI, анимации — последний рубеж где вопрос «что использовать» всё ещё требует решения. Lovable поставит Motion по умолчанию. Cursor предложит GSAP если попросить. Но выбор инструмента зависит не от личных предпочтений, а от задачи: простой переход, скролл-эффект, интерактивный компонент или готовый файл от дизайнера. Ниже — восемь инструментов, разбитых по реальным сценариям использования с ценами актуальными на июнь 2026.
