메뉴
Guide for migrating from framer-motion to Motion (motion/react) v12.42+. Covers the new import paths, animateView API for View Transitions, and breaking changes.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
| name | motion-migration-guide |
| description | Guide for migrating from framer-motion to Motion (motion/react) v12.42+. Covers the new import paths, animateView API for View Transitions, and breaking changes. |
| author | Appie-1 |
| tags | ["motion","animation","framer-motion","react","vue","migration"] |
| related_skills | ["motion-foundations","motion-patterns","motion-ui"] |
Framer Motion has been spun out from Framer into an independent open-source project called Motion. The library is now at motion/react (was framer-motion).
// OLD (framer-motion)
import { motion, AnimatePresence, useScroll } from "framer-motion";
// NEW (Motion)
import { motion, AnimatePresence, useScroll } from "motion/react";
Introduced in v12.41, moved to main library in v12.42:
import { animateView } from "motion/react";
// Basic page transition
animateView(() => {
// DOM updates happen here
updatePageContent();
}, {
// Transition options
duration: 0.5,
easing: [0.16, 1, 0.3, 1],
});
Key features:
.add(), .new(), .old(), .layout(), .class() — fine-grained control.group(false) to opt out of auto-groupingmotion/reactmotion-v (new!)motion/solid (community)npm install motion
# or
pnpm add motion
# or
yarn add motion
After installing, remove framer-motion from package.json.
npm uninstall framer-motion && npm install motionfrom "framer-motion" → from "motion/react"package.json references| Version | Date | Key Change |
|---|---|---|
| v12.41.0 | 2026-06-23 | animateView moves from Early Access to main library |
| v12.42.0 | 2026-06-24 | animateView layers auto-group, aspect-ratio aware auto-crop |
| v12.42.2 | 2026-06-30 | Bug fixes: AnimatePresence exit, drag constraints, scroll hydration |
motion/react is the new canonical path, NOT motion (bare import)framer-motion in lockfile after migration, run npm dedupe