Does this skill support the latest Framer Motion versions?

Yes, it is updated for Motion v11 and v12, including the move to the motion/react package and support for new hooks like usePageInView.

Does it support accessibility features?

Absolutely. The skill mandates the use of MotionConfig or useReducedMotion to ensure that users with motion sensitivities are respected.

Can I use this for complex exit animations?

Yes, the skill provides specific patterns for using AnimatePresence, including mode configurations (sync, wait, popLayout) to handle components leaving the React tree.

How does this skill ensure animation performance?

It enforces the use of GPU-accelerated properties such as transforms (x, y, scale) and opacity while discouraging the animation of layout-triggering properties like height or width.

Motion Web Animations

Name: Motion Web Animations
Author: agents-inc

byagents-inc

0•

设计工具

Implements high-performance, declarative React animations using Motion (formerly Framer Motion) best practices and GPU-accelerated patterns.

This skill provides a comprehensive framework for building fluid, physics-based animations in React using the Motion library. It guides Claude to implement orchestrated sequences with variants, handle complex component exits via AnimatePresence, and create seamless shared element transitions using layout components. By prioritizing GPU-accelerated transforms and enforcing strict accessibility standards like reduced motion support, it ensures that web animations are not only visually impressive but also performant and inclusive for all users.

主要功能

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

02Interactive gesture handling for hover, tap, and drag events

03Scroll-linked and scroll-triggered animation patterns with useScroll

040 GitHub stars

05Orchestrated UI sequences using reusable variants and staggering

06GPU-optimized layout animations and shared element transitions

使用场景

01Building interactive page transitions and modal UI components

02Creating complex scroll-driven storytelling and parallax effects

03Implementing accessible micro-interactions and gesture-based navigation

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

主要功能

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

02Interactive gesture handling for hover, tap, and drag events

03Scroll-linked and scroll-triggered animation patterns with useScroll

040 GitHub stars

05Orchestrated UI sequences using reusable variants and staggering

06GPU-optimized layout animations and shared element transitions

使用场景

01Building interactive page transitions and modal UI components

02Creating complex scroll-driven storytelling and parallax effects

03Implementing accessible micro-interactions and gesture-based navigation

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