skills.rest
appica-dev
appica-devOFFICIAL
Explore all skills by this author →
Website𝕏@Appica_devGitHub

motion

Implement declarative React animations with gestures, scroll effects, and layout transitions using Motion.

482|31|Updated Jul 9, 2026
Search Tags:#nextjs#motion#framer-motion#react animation#gestures#scroll animation#layout animation
One-click install
npx skills add https://github.com/appica-dev/appica-ui --skill motion-appica-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/appica-dev/appica-ui/tree/main/.claude/skills/motion
Command: npx skills add https://github.com/appica-dev/appica-ui --skill motion-appica-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, react, and includes scripts (resource) and references (resource) components.

What problem does it solve? Setting up the Motion (formerly Framer Motion) animation library in React projects involves recurring pitfalls: broken AnimatePresence exit animations, Next.js Server Component incompatibilities, Tailwind transition conflicts, and oversized bundles. This Skill provides production-tested patterns, templates, and automation scripts that prevent 29+ documented errors. ## Core Features & Use Cases - Complete Animation Patterns: Covers gestures (drag, hover, tap), scroll-linked parallax, FLIP layout animations, shared element transitions, SVG path animation, and spring physics with copy-paste-ready templates. - Framework Integration Guides: Dedicated patterns for Vite, Next.js App Router (client component wrappers), Tailwind CSS, and Cloudflare Workers deployment. - Performance Optimization: LazyMotion setup to reduce bundle size from 34 KB to 4.6 KB, virtualization guidance for large lists, and hardware acceleration hints. - Use Case: Build a modal dialog with backdrop fade and spring entrance, a drag-to-reorder list, or a parallax hero section in a Next.js 16 app without hitting the common AnimatePresence or "use client" errors. ## Quick Start Ask the AI to set up Motion in your React project and create an animated component such as a modal or scroll-triggered fade-in section.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add animations to a React app with Motion?▼

Install the motion package with pnpm add motion, then import { motion } from "motion/react" and wrap elements in motion components. Use props like initial, animate, whileHover, and whileTap to declare animation states directly on the component.

Motion vs AutoAnimate: which React animation library should I use?▼

AutoAnimate (3.28 KB) suits simple list add/remove/sort animations with zero configuration. Motion (2.3-34 KB) is better for gestures, scroll-linked animations, layout transitions, and SVG work. Use AutoAnimate for most list cases and Motion for complex interactions.

Why is my AnimatePresence exit animation not working?▼

AnimatePresence must stay mounted and wrap the conditional, not the reverse. Every child also needs a unique key prop. Placing AnimatePresence inside a conditional causes it to unmount before exit animations play.

Does Motion work with Next.js App Router and Server Components?▼

Motion only runs in Client Components, so files using it need the "use client" directive. The recommended pattern is a client wrapper re-exporting from "motion/react-client", which Server Components can then import.

How do I reduce the Motion bundle size?▼

Replace the full motion component with LazyMotion and the m component, which loads animation features on demand and reduces the bundle from about 34 KB to 4.6 KB. The useAnimate mini hook offers the smallest footprint at 2.3 KB.

Why do my Motion animations stutter when using Tailwind CSS?▼

Tailwind transition classes conflict with Motion's inline styles and native browser animations. Remove transition-* classes from elements animated by Motion and let each tool handle its own domain: Tailwind for static styling, Motion for animation.

Related Skills

Explore More Software Engineering Skills→
vobasevobase
59

shadcn-ui

Integrate shadcn/ui components into React projects with Tailwind CSS and TypeScript configuration.

Official
Intermediate
ChatAndBuildChatAndBuild
1

cloudflare-deploy

Deploy applications and manage services on Cloudflare using Workers and Pages.

Official
Advanced
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced
jackspacejackspace
16

auto-animate

Animate DOM add, remove, and reorder changes with zero configuration.

Community
Basic