Does it handle accessibility for users with motion sensitivities?

Yes, it includes critical patterns for respecting system-level reduced motion preferences using MotionConfig and the useReducedMotion hook.

What version of Framer Motion does this skill support?

It supports the latest versions (v11 and v12+), including the transition from the 'framer-motion' package to 'motion/react' and new features like usePageInView.

How does this skill ensure animation performance?

The skill enforces the use of GPU-accelerated transform properties such as x, y, scale, rotate, and opacity to ensure smooth 60fps performance.

Can I use this for complex multi-step sequences?

Absolutely. It provides patterns for variant-based orchestration, staggered children, and imperative control using the useAnimation hook for complex timelines.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: agents-inc

byagents-inc

0•

设计工具

Implements high-performance, declarative React animations using Motion for fluid UI transitions and interactive experiences.

This skill provides a comprehensive library of patterns and best practices for building production-grade animations in React using the Motion (formerly Framer Motion) library. It enables Claude to orchestrate complex sequences via variants, handle component presence with exit animations, and implement sophisticated scroll-linked and gesture-driven interactions. By prioritizing GPU-accelerated transforms and built-in accessibility for reduced motion, it ensures that web animations are not only visually engaging but also performant and inclusive across all devices.

主要功能

01Advanced scroll-triggered and scroll-linked animation utilities

02Accessibility-first implementation respecting reduced motion preferences

03Gesture-based interaction patterns for hover, tap, and drag

040 GitHub stars

05Hardware-accelerated layout transitions and shared element effects

06Declarative animation patterns using motion components and variants

使用场景

01Implementing scroll-driven storytelling through parallax and reveal animations

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

03Creating complex list animations with staggered entrance and exit effects

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

主要功能

01Advanced scroll-triggered and scroll-linked animation utilities

02Accessibility-first implementation respecting reduced motion preferences

03Gesture-based interaction patterns for hover, tap, and drag

040 GitHub stars

05Hardware-accelerated layout transitions and shared element effects

06Declarative animation patterns using motion components and variants

使用场景

01Implementing scroll-driven storytelling through parallax and reveal animations

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

03Creating complex list animations with staggered entrance and exit effects

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