AIKraft/AI/Войти
AIKraft/Skills/framer motion

framer motion

Expert guidelines for building performant animations with Framer Motion/Motion library in React applications

mindrally official Дизайн

Что делает навык

Skill предоставляет экспертные рекомендации по созданию производительных анимаций с использованием библиотеки Motion (ранее Framer Motion) в React-приложениях на TypeScript. Он охватывает принципы оптимизации, интеграцию с React, доступность и обработку жестов для обеспечения плавности работы интерфейсов.

Когда применять

  • Создание сложных анимаций с использованием Variants и staggered-эффектов для списков
  • Реализация переходов между страницами (Page Transitions) и анимаций появления/исчезания элементов через AnimatePresence
  • Настройка scroll-linked анимаций и параллакс-эффектов с помощью useScroll и useTransform
  • Обеспечение доступности анимаций с учетом предпочтений пользователя по снижению движения (reduced motion)
  • Оптимизация производительности анимаций через использование аппаратно ускоренных свойств (transform, opacity) и will-change

Как работает

  1. Импортировать компоненты из пакета 'motion/react', избегая устаревшего 'framer-motion'
  2. Анимировать только свойства, не вызывающие перерасчет макета (x, y, scale, rotate, opacity), и правильно настраивать will-change
  3. Использовать Variants для управления сложными последовательностями анимаций и AnimatePresence для exit-анимаций
  4. Предпочитать spring-анимации для более естественного ощущения и использовать useReducedMotion для доступности
  5. Мемоизировать варианты анимаций и колбэки с помощью useMemo и useCallback, избегая создания новых объектов стилей при рендере
  6. Использовать инструменты отладки (React DevTools, Chrome DevTools Performance) для проверки производительности и достижения 60fps

Примеры запросов агенту

Как реализовать плавное появление списка элементов с задержкой (stagger) при скролле, используя Motion?
Напиши компонент модального окна с анимацией появления и исчезновения, учитывающий настройку reduced motion
Как создать параллакс-эффект для заголовка при прокрутке страницы с помощью useScroll и useTransform?

Что понадобится

  • TypeScript
  • Пакет motion (ранее Framer Motion)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «framer-motion» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r framer-motion/ ~/.claude/skills/framer-motion/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.