Как сделать анимированный сайт в Claude Code: 2 приёма без кода

Что нужно до старта: сайт и пять минут

Для анимации нужен уже собранный сайт (папка с index.html) или свежий проект, который Claude Code только начинает собирать - в обоих случаях порядок действий одинаковый: сначала статичная версия страницы, потом движение поверх неё. Собирать анимацию раньше самой вёрстки бессмысленно - двигать пока нечего

Второе, что нужно - открытый в Claude Code проект и пять свободных минут на то, чтобы описать эффект словами. Писать код самому не придётся: вся статья построена на том, что ты объясняешь результат, а Claude Code переводит объяснение в CSS и JavaScript. Если Claude Code ещё не установлен вовсе - установка из России разобрана в отдельном гайде про установку, а если он уже стоит, но хочется разобраться в самом инструменте глубже - в гайде про 9 шагов до первого проекта

Шаг 1. Выбери, что двигать: скролл или ховер

Два самых частых и самых безопасных эффекта на сайте - появление блока при прокрутке страницы (человек листает вниз, и текст или картинка плавно проявляются) и лёгкий отклик карточки на наведение курсора (карточка чуть приподнимается или увеличивается, когда на неё наводишь мышь). Оба эффекта не мешают читать сайт и не перехватывают управление у посетителя - в отличие, например, от анимаций, которые сами прокручивают страницу за человека

Начинать стоит ровно с одного эффекта на первом экране сайта, а не сразу со всех подряд. Сайт, где анимируется каждый второй блок, выглядит суетливо и медленнее грузится - лучше один заметный приём, чем десять мелких

Шаг 2. Подключи библиотеку анимаций через Claude Code

GSAP - официально «100% бесплатна для всех пользователей» на официальной странице тарифов (03.09.2026): «GSAP is now 100% free for all users, thanks to Webflow's support». Раньше часть возможностей библиотеки была платной, теперь весь набор, включая эффект появления по прокрутке (плагин ScrollTrigger), доступен без ограничений и без карты

Открой Claude Code в папке своего проекта и напиши прямым текстом: «подключи библиотеку анимаций GSAP через CDN и добавь эффект появления блока с классом hero при прокрутке страницы». Это даёт агенту точное задание вместо расплывчатого «сделай красиво» - и он подключает готовый инструмент вместо того, чтобы писать анимацию с нуля

Если библиотека не нужна вовсе - для одного-двух простых эффектов (появление по скролу, отклик на ховер) хватает и чистого CSS без единой строчки JavaScript, дальше в статье показан именно такой пример. Альтернатива GSAP - библиотека Motion (MIT-лицензия, тоже без оплаты), она удобнее, если сайт уже написан на React или похожем фреймворке. Если вместо Claude Code используется Cursor - разница инструментов и когда что выбирать разобрана в отдельном сравнении, сам порядок с анимацией от выбора агента не меняется

Шаг 3. Опиши эффект простыми словами, не кодом

Не пиши код сам - опиши результат словами: что появляется, откуда именно, за сколько времени. Хороший пример формулировки для Claude Code: «когда блок с отзывами появляется в области экрана при прокрутке, он должен плавно проявиться снизу вверх примерно за треть секунды, без рывков». Плохой пример - вставить кусок чужого кода и попросить «адаптируй»: агент теряет контекст, зачем этот эффект вообще нужен на твоей странице

Если результат получился не тем, что ты представлял - не переписывай код руками, а уточни формулировку и попроси переделать. Например: «анимация появляется слишком резко, сделай медленнее и добавь лёгкий сдвиг сверху вниз, а не просто мигание»

Я собрал именно такой пример для этой статьи: страница с одним блоком, который проявляется снизу вверх, как только докручиваешь до него страницу. Работает это на новом CSS-свойстве animation-timeline: view() - оно само привязывает анимацию к тому, насколько блок виден на экране, без единой строчки JavaScript и без сторонней библиотеки

Шаг 4. Проверь, что двигаются только два безопасных свойства

По официальному руководству Google по CSS-анимациям, безопасно двигать ровно два свойства - opacity (прозрачность) и transform (сдвиг, поворот, масштаб). Цитата дословно: «restrict animations to opacity and transform to keep animations on the compositing stage». Иначе говоря, браузер отрисовывает такую анимацию на отдельном быстром слое, не пересчитывая всю страницу заново

Всё остальное - ширина, высота, положение через top/left, отступы - заставляет браузер каждый кадр заново считать расположение всех элементов страницы, и анимация начинает дёргаться. То же руководство приводит прямое сравнение: анимация, которая двигает элемент через top/left, теряет половину кадров, а точно такая же анимация через transform теряет только один кадр из ста

Спроси Claude Code прямым текстом после того, как эффект готов: «какие CSS-свойства меняются в добавленной анимации - только opacity и transform, или что-то ещё?». Если агент называет что-то кроме этой пары - попроси переписать анимацию именно через transform, объяснив, что это вопрос скорости, а не вкуса. Если Claude Code запускается на Windows и сама установка вызывает вопросы отдельно от темы анимации - в отдельном гайде под Windows разобраны местные особенности запуска

На той же странице, что и блок с прокруткой, у меня стоит карточка с откликом на курсор: при наведении она чуть приподнимается и увеличивается. Анимация построена ровно на двух свойствах - transform: translateY() scale() для движения и box-shadow для тени, ни ширина, ни положение блока в разметке не трогаются

Шаг 5. Добавь выключатель анимации для тех, кому она мешает

По официальной документации MDN, у операционной системы есть настройка «уменьшить движение» (prefers-reduced-motion), и часть людей включает её осознанно - не из-за вкуса, а по медицинским причинам: быстрое движение на экране может вызывать головокружение при вестибулярных нарушениях. Браузер умеет сообщить сайту, что у человека эта настройка включена, а сайт обязан её уважать

Добавляется это одним небольшим блоком кода, который Claude Code вставит сам по просьбе «добавь правило prefers-reduced-motion, чтобы у людей с этой системной настройкой все анимации на сайте отключались»:

Добавь в CSS правило @media (prefers-reduced-motion: reduce), которое отключает все
transition и animation на сайте для пользователей с этой системной настройкой.
Не убирай сам эффект - просто убери движение, конечный вид блока должен остаться прежним.

Скопируй этот текст целиком и вставь в чат Claude Code - агент сам найдёт все анимации на странице и добавит правило, которое их выключает именно для тех, кому нужно, а не для всех подряд

Какими эффектами пользуются готовые сервисы анимированных сайтов

Отдельный класс инструментов не пишет анимацию заново на каждом сайте, а продаёт готовую библиотеку промптов под конкретные визуальные направления - например, сервис motionsites.ai. Разница с тем, что описано в этой статье, простая: там ты выбираешь готовое направление и вставляешь готовый текст в Claude Code, а здесь - собираешь эффект с нуля под свой сайт, понимая, что именно происходит внутри. Подробный разбор такого сервиса - в соседнем гайде Motionsites.ai: готовые промпты для сайтов с 3D-анимацией, если хочется более быстрого и платного пути вместо ручной сборки. Общий обзор бесплатных ИИ-инструментов и сервисов для сайтов, если пока непонятно, с чего вообще начинать - в подборке инструментов для сайтов

Три эффекта сверх ховера и скролла, если хочется больше

Появление по прокрутке и отклик на курсор закрывают почти все практические задачи, но у темы есть ещё три эффекта, с которыми часто встречаешься на чужих сайтах:

Все три эффекта подчиняются тем же двум правилам, что и основные два приёма: двигать только transform/opacity, и не забывать про prefers-reduced-motion

Частые ошибки, из-за которых анимированный сайт выглядит хуже обычного

Сколько это будет стоить и сколько займёт по времени

Сами библиотеки бесплатны: GSAP и Motion не берут денег ни за один эффект из этой статьи на 03.09.2026, оплаты требует только сама подписка на Claude Code, если она ещё не оформлена. По времени два-три эффекта - ховер плюс появление по скролу - собираются за один вечер, если сайт уже готов: основное время уходит не на код, а на формулировку задания и проверку результата на своём экране. Если считаешь бюджет всего сайта целиком, а не только анимации - смета из пяти строк и четырёх путей есть в отдельном гайде про стоимость сайта

Если проект собирается вместе с самим сайтом с нуля, время растёт до целого вечера или двух: сначала статичная вёрстка, потом движение поверх неё. Отдельно стоит проверить скорость через PageSpeed Insights - показатель, на который стоит смотреть, называется Largest Contentful Paint, и у нормального сайта он держится до 2,5 секунды. Настройка самого Claude Code под конкретный проект (свои правила, свой стиль кода) разобрана отдельно в гайде про настройку Claude Code, если хочется зайти глубже базовой установки

Чем анимированный сайт отличается от обычного для посетителя

Хаб гайдов про Claude Code

Если анимированный сайт собирался или будет собираться в Claude Code, а сам инструмент вызывает вопросы отдельно от темы анимации - в разделе Claude Code: разборы и гайды собраны остальные материалы про установку, первые проекты и типовые ошибки инструмента

Как проверить, что анимация не мешает читать сайт

Три быстрые проверки после того, как эффект добавлен:

1. Пролистай страницу медленно и быстро. Быстрая прокрутка не должна ломать анимацию появления - блок либо мгновенно оказывается в конечном состоянии, либо доигрывает плавно, но никогда не мигает и не дёргается
2. Наведи мышь и сразу убери. Отклик на ховер должен быть таким же плавным при уходе курсора, как и при наведении - если карточка резко «прыгает» обратно, попроси Claude Code добавить transition и в обратную сторону
3. Включи в настройках системы «уменьшить движение» и перезагрузи страницу. На Mac это Системные настройки → Универсальный доступ → Дисплей → «Уменьшение движения», на Windows - Параметры → Специальные возможности → Эффекты. Анимация должна пропасть, а конечный вид блоков остаться прежним

Что ещё почитать про сайты и Claude Code

• Как создать сайт с помощью ИИ: 4 пути и страница за 40 минут - если сайта ещё нет вовсе и его только предстоит собрать, прежде чем добавлять анимацию
• Motionsites.ai: готовые промпты для премиум-сайтов с 3D-анимацией - более быстрый платный путь через готовую библиотеку промптов вместо ручной сборки
• Как пользоваться Claude Code: установка и 9 шагов до проекта - если Claude Code ещё не установлен
• Как выложить сайт в интернет бесплатно в 2026: 4 способа - следующий шаг после того, как анимированный сайт готов на компьютере
• Claude Code: разборы и гайды - остальные материалы про сам инструмент
• Курс по вайбкодингу - если хочется системного разбора вайбкодинга целиком, не только анимаций
• Создание сайтов на Claude: лендинг одной строкой в Claude Code - ещё один путь получить файлы сайта в Claude Code
• Claude Code бесплатно: 11 находок вместо платного софта - если после анимации хочется сэкономить и на остальных инструментах вокруг сайта
• Open Design: бесплатная копия Claude Design для сайтов и презентаций - ещё один бесплатный инструмент для визуальной части сайта рядом с анимацией
• Как заработать на нейросетях: 5 путей, цены и первый заказ - если сайт с анимацией уже готов и следующий вопрос - как на этом навыке заработать

Источники

Все страницы проверены прямым запросом 3 сентября 2026 года

• GSAP: тарифы - официальная строка «GSAP is now 100% free for all users, thanks to Webflow's support»
• web.dev: руководство по CSS-анимациям - официальная рекомендация Google ограничивать анимацию свойствами opacity и transform
• MDN: prefers-reduced-motion - официальная документация системной настройки уменьшения движения
• DevToolbox: гид по CSS scroll-driven animations - механика animation-timeline и animation-range для появления по прокрутке без JavaScript
• Karl Koch: on scroll-driven reveals - практический разбор паттерна появления по скролу на чистом CSS
• PageSpeed Insights - официальный инструмент Google для проверки скорости страницы после добавления анимации

Памятка: анимированный сайт за вечер

Восемь строк, которые закрывают выбор эффекта и частые ошибки

Частые вопросы