How does this skill ensure animation performance?

It enforces the use of GPU-accelerated transform properties (x, y, scale, rotate) and opacity, while requiring named constants for timing to avoid performance-draining layout reflows.

Does it handle exit animations automatically?

The skill provides the necessary patterns for AnimatePresence, ensuring that components being removed from the React tree can perform exit animations correctly using unique keys.

Does this skill support the latest version of Motion?

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

Is accessibility built into these animation patterns?

Absolutely. It prioritizes user preferences by integrating MotionConfig for reduced motion, ensuring animations are either simplified or disabled for users who prefer less movement.

Motion & Framer Motion Animation

Name: Motion & Framer Motion Animation
Author: agents-inc

byagents-inc

•

设计工具

Implements declarative, high-performance React animations using the Motion library and Framer Motion patterns.

This skill provides a comprehensive framework for building fluid, physics-based animations in React applications using Motion (formerly Framer Motion). It streamlines the implementation of GPU-accelerated transitions, complex orchestration via variants, gesture-based interactions, and scroll-linked effects while ensuring strict adherence to performance and accessibility standards. By automating the setup of AnimatePresence for exit animations and enforcing transform-based property usage, it helps developers create professional-grade UI motion that feels natural and remains performant across all devices.

主要功能

011 GitHub stars

02Declarative motion components for enter, exit, and presence animations

03Orchestrated animation sequences using reusable variants and stagger effects

04Interactive gesture handling for hover, tap, focus, and drag states

05GPU-optimized layout animations and shared element transitions (FLIP)

06Accessible animation patterns with automatic reduced motion support

使用场景

01Building interactive UI components like modals, drawers, and expandable cards

02Creating seamless page transitions and shared element effects between views

03Implementing performant scroll-triggered reveals and parallax progress indicators

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

主要功能

011 GitHub stars

02Declarative motion components for enter, exit, and presence animations

03Orchestrated animation sequences using reusable variants and stagger effects

04Interactive gesture handling for hover, tap, focus, and drag states

05GPU-optimized layout animations and shared element transitions (FLIP)

06Accessible animation patterns with automatic reduced motion support

使用场景

01Building interactive UI components like modals, drawers, and expandable cards

02Creating seamless page transitions and shared element effects between views

03Implementing performant scroll-triggered reveals and parallax progress indicators

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