code design
RU EN
~/wiki /motion-i-animatsiya/

Motion и анимация

Микроанимации, переходы, интерактивные состояния, motion-принципы и анимация, которая помогает интерфейсу, а не отвлекает.

Как пользоваться разделом

Эта страница - короткий маршрут по одной теме. Здесь собраны только публичные индексируемые материалы, чтобы перейти от обзора к действию без поиска по всей вики.
10 материалов
01
Начните с самого свежего материала, если нужен контекст по инструменту или релизу.
02
Откройте самый практический гайд первым, если решаете конкретную задачу проекта.
03
Используйте Glossary для терминов и Jobs для проверки спроса вокруг этой темы.

$ ls ./sections

Разделы направления

Основы VibeDesign/

Как устроен VibeDesign: бриф, процесс, роли, насмотренность, критерии качества и работа с ИИ как с дизайн-партнером.
0 статьи

Новости/

Новости и важные обновления из мира ИИ и разработки: релизы инструментов, изменения платформ и их практическое влияние на работу.
0 статьи

UX и интерфейсы/

Сценарии пользователя, структура экранов, навигация, формы, типографика, читаемость и интерфейсные решения без лишнего шума.
0 статьи

Исследования и UX-методы/

Интервью, CJM, Jobs To Be Done, быстрые UX-проверки, гипотезы, пользовательские боли и способы принимать дизайн-решения на фактах.
0 статьи

Figma и макеты/

Wireframe, auto-layout, компоненты, сетки, подготовка экранов, аккуратная структура файла и практическая работа с Figma через ИИ.
0 статьи

AI-инструменты дизайна/

Claude Design, Open Design, Google Stitch, Pencil.dev и другие инструменты: где они ускоряют работу, а где требуют контроля дизайнера.
0 статьи

Дизайн-система и компоненты/

Токены, цвета, типографика, UI-kit, состояния компонентов, паттерны интерфейса и единый визуальный язык продукта.
0 статьи

Брендинг и айдентика/

Позиционирование, визуальный стиль, логотипы, тон коммуникации, бренд-система и упаковка продукта для узнаваемости и доверия.
0 статьи

Motion и анимация/

Микроанимации, переходы, интерактивные состояния, motion-принципы и анимация, которая помогает интерфейсу, а не отвлекает.
10 статей

Прототипы и handoff/

Кликабельные прототипы, сценарии, спецификации, handoff в разработку, контроль реализации и приемка интерфейса после сборки.
0 статьи

Редизайн и аудит/

UX-аудит, визуальная диагностика, обновление сайта или продукта, сохранение SEO и план релиза без поломки текущих сценариев.
0 статьи

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

Контраст, фокус, клавиатурная навигация, читаемость, aria-паттерны и интерфейсы, которыми удобно пользоваться разным людям.
0 статьи

Портфолио и кейсы/

Разборы работ, кейсы редизайна, оформление портфолио, структура результата и упаковка дизайн-проекта для клиента или работодателя.
0 статьи

Новости дизайна/

Релизы AI-дизайн инструментов, обновления Figma, Claude, Stitch и других сервисов, свежие подходы и практические разборы новинок.
0 статьи
Motion и анимация
14.06.2026 9 мин

Как показывать что AI думает: паттерны анимации прогресса агента

Спиннер придуман для операций длиной 0.5–2 секунды. LLMзапрос занимает 4–15 секунд. Многошаговая задача агента — до нескольких минут. За это время спиннер перестаёт работать как индикатор прогресса и становится источником тревоги: «чтото происходит?», «система зависла?», «стоит ли ждать?»
motionанимацияAI-дизайнUX
Motion и анимация
14.06.2026 8 мин

Когда анимация мешает: сигналы что ты перестарался — и как откатиться

Точка перехода из «помогает» в «мешает» проходит незаметно. Добавил одну анимацию — хорошо. Потом ещё одну. Потом ещё. В какойто момент пользователь начинает ждать пока всё доиграет прежде чем сможет продолжить работу.
motionанимацияUXчеклист
Motion и анимация
14.06.2026 9 мин

AI анимирует за тебя: что из инструментов 2026 реально работает

AI в анимации 2026 — это не один инструмент. Это несколько разных классов под разные задачи. Смешивать их назначение — самая частая ошибка: ожидать что инструмент для видеогенерации напишет CSSанимацию, или что codeагент создаст иллюстративную анимацию с нуля.
motionанимацияAI-дизайнинструменты
Motion и анимация
14.06.2026 8 мин

Переходы которые не тошнят: паттерны смены экранов для мобайла и веба

Переход между экранами — самый часто встречающийся motionпаттерн и самый часто ломающий UX. Плохой переход дезориентирует: пользователь не понимает где он был, где он теперь, что произошло.
motionанимацияUXкомпоненты
Motion и анимация
14.06.2026 9 мин

Easing, duration, delay: три параметра которые делают анимацию живой, а не мультяшной

Можно взять правильный тип анимации, правильный компонент — и всё равно получить чтото механическое или мультяшное. Три параметра определяют насколько анимация ощущается как настоящая: easing, duration, delay.
motionанимацияворкфлоучеклист
Motion и анимация
14.06.2026 8 мин

Motion-дизайн, который помогает, а не раздражает: принципы которые работают

Интерфейс без анимаций — не нейтральный. Он общается через мгновенные переключения состояний которые мозг с трудом отслеживает. Нажал кнопку — резко оказался на другой странице. Произошло чтото? Где я был? Где я теперь?
motionанимацияUXворкфлоу
Motion и анимация
12.06.2026 10 мин

Lottie: как отправить анимацию в продакшен без боли и потери качества

Дизайнер сделал красивую анимацию в After Effects. Разработчик получил файл. Дальше начинается боль: GIF слишком тяжёлый, видео не масштабируется, SVG не анимируется нужным образом. Lottie решает это — но только если знать как его готовить. Lottie — формат который конвертирует After Effects-анимации в JSON. Файл весит в 600 раз меньше GIF того же качества, рендерится нативно на вебе, iOS, Android и React Native, масштабируется без потерь. Проблемы начинаются не с форматом, а с тем что никто не объяснил правила на каждом этапе — от дизайнера до деплоя.
motionанимацияLottiehandoff
Motion и анимация
12.06.2026 11 мин

Framer Motion за один вечер: анимируй React-компоненты как профи

Большинство туториалов по Framer Motion учат одно и то же: замени `<div>` на `<motion.div>`, добавь `animate={{ opacity: 1 }}` — готово. Это занимает десять минут, а не вечер. Вечер нужен на другое: понять почему анимации дёргаются, как правильно анимировать выход элемента, как не раздувать бандл и почему варианты — это не синтаксический сахар, а принципиально другой подход к оркестрации. Этот гайд — про то что реально нужно в проекте. Без теории ради теории.
motionанимацияFramer Motionворкфлоу
Motion и анимация
12.06.2026 10 мин

CSS анимации без библиотек: что умеет браузер — и это на удивление много

Ещё два года назад этот список был бы коротким. Плавные переходы, keyframe-анимации, базовый hover. Всё серьёзное — в JavaScript. В 2026 году браузер умеет анимировать скролл без IntersectionObserver, переходы между страницами без роутер-библиотек, появление и исчезновение элементов из `display: none` без таймеров, и раскрытие аккордеонов до `height: auto` без измерения `scrollHeight`. Причём поддержка у всех этих фич — кроссбраузерная. Это не значит выбрасывать GSAP или Motion. Это значит знать где браузер справляется сам — и не тащить библиотеку там где она не нужна.
motionанимацияворкфлоуинструменты
Motion и анимация
12.06.2026 15 мин

Библиотеки анимации для сайтов в 2026: что брать и на каком этапе

Когда генерируешь сайт через AI, анимации — последний рубеж где вопрос «что использовать» всё ещё требует решения. Lovable поставит Motion по умолчанию. Cursor предложит GSAP если попросить. Но выбор инструмента зависит не от личных предпочтений, а от задачи: простой переход, скролл-эффект, интерактивный компонент или готовый файл от дизайнера. Ниже — восемь инструментов, разбитых по реальным сценариям использования с ценами актуальными на июнь 2026.
motionанимацияинструментыворкфлоу