Does it support accessibility for animations?

Yes, it mandates the use of MotionConfig or useReducedMotion to respect user system preferences for reduced motion.

How does this skill handle animation performance?

It enforces the use of GPU-accelerated properties like transform (x, y, scale, rotate) and opacity to ensure smooth 60fps animations.

What version of Framer Motion does this skill support?

This skill is updated for Framer Motion v11 and v12, following the package rename to 'motion/react' and including features like usePageInView.

Can I create complex shared element transitions?

Yes, the skill includes patterns for layoutId and AnimatePresence to create seamless transitions between different components or pages.

Does it help with scroll-linked animations?

Absolutely. It provides specific patterns for using useScroll and useTransform for continuous scroll-linked effects and whileInView for triggers.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: agents-inc

byagents-inc

•

Design Tools

Implements high-performance, declarative React animations using Motion for fluid UI transitions and gesture-based interactions.

This skill equips Claude with the expertise to implement sophisticated web animations using the Motion library (formerly Framer Motion). It provides standardized patterns for orchestrated sequences using variants, exit animations via AnimatePresence, and complex layout transitions with the FLIP technique. By prioritizing GPU-accelerated transforms and physics-based spring animations, it ensures a smooth user experience while maintaining strict accessibility standards like reduced motion support and optimized performance for React-based interfaces.

Key Features

01Built-in accessibility support for user-defined reduced motion preferences

02Gesture-based interactions including hover, tap, drag, and focus states

03Declarative motion components and variants for orchestrated sequences

04Performance-optimized scroll-triggered and scroll-linked animation patterns

051 GitHub stars

06Automatic layout animations and shared element transitions using FLIP

Use Cases

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

02Creating immersive landing pages with scroll-reveal effects and parallax backgrounds

03Developing mobile-like page transitions and complex list animations in React apps

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

01Built-in accessibility support for user-defined reduced motion preferences

02Gesture-based interactions including hover, tap, drag, and focus states

03Declarative motion components and variants for orchestrated sequences

04Performance-optimized scroll-triggered and scroll-linked animation patterns

051 GitHub stars

06Automatic layout animations and shared element transitions using FLIP

Use Cases

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

02Creating immersive landing pages with scroll-reveal effects and parallax backgrounds

03Developing mobile-like page transitions and complex list animations in React apps

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