Motion migration guide

Skill S3YED/appie-kit/skills/design/motion-migration-guide

Build Your Own AI Employee. The complete starter kit for OpenClaw + Hermes Agent. 155 deduplicated skills, drag-and-drop workspace, case studies, install scripts.

Install

npx -y skills add S3YED/appie-kit --skill motion-migration-guide

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.5 KB, as published. Nobody here has run it

Motion v12.42+ Migration Guide

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).

Key Changes

New Import Paths

// OLD (framer-motion)
import { motion, AnimatePresence, useScroll } from "framer-motion";

// NEW (Motion)
import { motion, AnimatePresence, useScroll } from "motion/react";

animateView API (View Transitions)

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
Auto-grouping — layers auto-group to match DOM hierarchy
.group(false) to opt out of auto-grouping
Auto-crop with border-radius animation (aspect-ratio aware)

Framework Support

React: motion/react
Vue 3: motion-v (new!)
Vanilla JS: Works without any framework
Solid: motion/solid (community)

Installation

npm install motion
# or
pnpm add motion
# or
yarn add motion

After installing, remove framer-motion from package.json.

Migration Steps

npm uninstall framer-motion && npm install motion
Replace all imports: from "framer-motion" → from "motion/react"
Update package.json references
Test AnimatePresence exit animations (bug fixed in v12.42.2)

Version History (Recent)

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

Pitfalls

motion/react is the new canonical path, NOT motion (bare import)
If you still see framer-motion in lockfile after migration, run npm dedupe
AnimatePresence exit animation bugs were fixed in v12.42.2 — upgrade if you're on an older v12 release