Are the animations optimized for performance?

Absolutely. The skill mandates animating GPU-accelerated properties like transforms (x, y, scale) and opacity rather than layout-triggering properties like height or width.

Does this skill support the latest version of Framer Motion?

Yes, it includes support for the v11+ package rename to 'motion/react' and v12 features like usePageInView and enhanced stagger options.

Can I use this for shared element transitions?

Yes, it provides specific patterns for layoutId and LayoutGroup to create seamless transitions between different components or views.

How does this skill handle accessibility and reduced motion?

The skill enforces the use of MotionConfig and useReducedMotion hooks to ensure all animations respect the user's system preferences for reduced motion.

Web Animation (Framer Motion)

Name: Web Animation (Framer Motion)
Author: agents-inc

byagents-inc

0•

Design Tools

Implements fluid, production-grade React animations using Motion patterns, orchestrated variants, and accessibility-first principles.

This skill equips Claude with specialized knowledge to implement declarative animations in React applications using the Motion library (formerly Framer Motion). It provides standardized patterns for creating high-performance, GPU-accelerated transitions, complex orchestrated sequences via variants, and interactive gestures such as drag and hover. By enforcing best practices like automatic reduced motion support, FLIP-based layout animations, and efficient exit transitions with AnimatePresence, it ensures that UI animations are visually impressive, performant, and accessible to all users.

Key Features

01Seamless exit animations and page transitions using AnimatePresence and layoutId

020 GitHub stars

03Declarative motion components for GPU-accelerated transforms and opacity transitions

04Built-in accessibility patterns with mandatory reduced motion compliance

05Orchestrated animation sequences using reusable variants and stagger effects

06Interactive gesture support including hover, tap, drag, and scroll-linked effects

Use Cases

01Building interactive UI components like expandable cards, modals, and sliding tab indicators

02Developing complex multi-step animation sequences for data visualizations and user onboarding

03Creating scroll-triggered reveal animations and parallax effects for modern landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-animation-framer-motion

For use in Claude.ai and ChatGPT

Key Features

01Seamless exit animations and page transitions using AnimatePresence and layoutId

020 GitHub stars

03Declarative motion components for GPU-accelerated transforms and opacity transitions

04Built-in accessibility patterns with mandatory reduced motion compliance

05Orchestrated animation sequences using reusable variants and stagger effects

06Interactive gesture support including hover, tap, drag, and scroll-linked effects

Use Cases

01Building interactive UI components like expandable cards, modals, and sliding tab indicators

02Developing complex multi-step animation sequences for data visualizations and user onboarding

03Creating scroll-triggered reveal animations and parallax effects for modern landing pages