How does this skill ensure animation performance?

The skill enforces the use of GPU-accelerated properties (x, y, scale, rotate, opacity) and warns against animating layout-triggering properties like margins or positions.

What version of Framer Motion does this skill support?

It supports the latest 'motion/react' (v11 and v12+) syntax, including new features like usePageInView and enhanced stagger options, while maintaining backward compatibility.

Does it handle accessibility for users with motion sensitivities?

Yes, all patterns include requirements for respecting 'reduced motion' preferences using MotionConfig or the useReducedMotion hook to ensure inclusive design.

Can I use this for complex shared element transitions?

Absolutely. It includes specific patterns for layoutId and LayoutGroup to create seamless transitions between different component states or routes.

Motion Animation (Framer Motion)

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

byagents-inc

0•

디자인 도구

Implements production-grade React animations using Motion patterns for declarative UI transitions, gestures, and scroll effects.

This skill empowers Claude to build fluid, high-performance web animations using the Motion library (formerly Framer Motion). It provides standardized implementation patterns for orchestrating complex sequences with variants, handling exit animations via AnimatePresence, and implementing interactive gesture-based components. By enforcing performance best practices like GPU-accelerated transforms and mandatory accessibility support for reduced motion, it ensures that generated animations are both visually polished and production-ready for modern React applications.

주요 기능

01Exit animations and layout transitions (FLIP technique)

02Scroll-triggered reveals and scroll-linked parallax effects

03Automated accessibility compliance for reduced motion

04Declarative motion components and animation variants

05Gesture-based interactions including hover, tap, and drag

060 GitHub stars

사용 사례

01Implementing scroll-based storytelling and progress indicators

02Building sophisticated list orchestrations with staggered entry effects

03Creating seamless page transitions and interactive modal components

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

주요 기능

01Exit animations and layout transitions (FLIP technique)

02Scroll-triggered reveals and scroll-linked parallax effects

03Automated accessibility compliance for reduced motion

04Declarative motion components and animation variants

05Gesture-based interactions including hover, tap, and drag

060 GitHub stars

사용 사례

01Implementing scroll-based storytelling and progress indicators

02Building sophisticated list orchestrations with staggered entry effects

03Creating seamless page transitions and interactive modal components

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