Конспекты
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
GSAP (GreenSock Animation Platform) — это стандарт индустрии для создания сложных анимаций, завязанных на прокрутке страницы. В отличие от стандартных CSS-анимаций, GSAP позволяет программно контролировать таймлайн, привязывая прогресс аним
Роль: Motion Design Strategy
GSAP (GreenSock Animation Platform) — это стандарт индустрии для создания сложных анимаций, завязанных на прокрутке страницы. В отличие от стандартных CSS-анимаций, GSAP позволяет программно контролировать таймлайн, привязывая прогресс анимации к положению скролла (scrub). Это создает ощущение 'живого' сайта, где пользователь управляет движением элементов. Используйте GSAP для лендингов, где нужно рассказать историю через движение объектов, текста и SVG-графики.
Инструмент: GSAP + ScrollTrigger
Используйте плагин ScrollTrigger для связи анимации с прокруткой. Установите параметр scrub: true, чтобы анимация следовала за движением колесика мыши вперед и назад.
Инструмент: GSAP SplitText
Разбейте текст на отдельные символы или слова. Это позволяет создавать премиальный эффект 'проявления' контента, когда буквы вылетают или проявляются по одной.
Роль: Frontend Excellence
Motion.dev (ранее Framer Motion) идеально подходит для анимации интерфейсных компонентов и переходов между состояниями (UI states). Она нативно интегрирована с React и позволяет описывать анимации декларативно. Если GSAP — это про 'кино' на лендинге, то Motion.dev — это про 'отклик' интерфейса: как открываются меню, как вылетают уведомления и как ведут себя карточки при клике. Это делает продукт 'дорогим' на ощупь.
Инструмент: Motion.dev (Framer Motion)
Используйте компонент motion.div и проп layout для автоматической анимации изменения размеров. Настройте варианты (variants) для состояний open/closed.
Инструмент: Framer Motion AnimatePresence
Оберните списки в AnimatePresence, чтобы элементы не просто исчезали из DOM, а выполняли финальную анимацию (exit animation) перед удалением.
Роль: AI Orchestration
Главная ошибка при работе с LLM (Claude, GPT-4, Gemini) — просить 'сделай крутую анимацию' одним промптом. Модели склонны к 'дистрибутивной конвергенции' — они выдают среднее, безопасное решение из обучающей выборки. Чтобы получить уникальный дизайн, нужно разделить процесс на фазу планирования таймлайна и фазу технической реализации. Опишите физику движения, последовательность элементов и ограничения (без 3D, только чистый CSS/JS) до того, как просить код.
Инструмент: Claude 3.5 Sonnet / Gemini 1.5 Pro
Вместо общих фраз опишите сценарий: 'Когда пользователь скроллит, центральный круг взрывается на 50 малых пузырьков, которые летят вверх с разным ускорением'.
Инструмент: Motion.dev MCP / Claude Desktop
Подключите MCP сервер от motion.dev к вашему AI-агенту. Это даст модели доступ к актуальной документации и лучшим практикам библиотеки в реальном времени.
Роль: Product Marketing
Вместо тяжелых GIF или видео для демонстрации фич продукта, можно использовать 'самоиграющие' UI-компоненты на базе Motion.dev. Это код, который имитирует действия пользователя: движение курсора, клики, ввод текста и реакцию интерфейса. Такие анимации весят копейки, идеально четкие на любых экранах и легко обновляются при изменении дизайна. Ключ к успеху здесь — использование useRef для определения координат элементов, чтобы курсор попадал точно в кнопки.
Инструмент: React + Framer Motion
Не используйте хардкод координат (x: 100, y: 200). Используйте getBoundingClientRect() через рефы, чтобы курсор всегда находил элемент, даже если верстка поехала.
Инструмент: Framer Motion loop
Создайте бесконечный цикл: ввод задачи -> нажатие Enter -> отметка 'выполнено' -> удаление. Это создает эффект живого продукта на лендинге.