What version of Framer Motion does this skill support?

It supports the latest versions, including the v11+ rename to the 'motion/react' package and new v12 features like usePageInView and enhanced stagger options.

How does this skill handle accessibility and reduced motion?

The skill enforces the use of MotionConfig or useReducedMotion to automatically scale back or disable animations based on the user's system preferences.

Can I use this skill for shared element transitions between different pages?

Yes, it provides patterns for using layoutId and AnimatePresence to create seamless transitions for elements appearing in different parts of the component tree.

Why does the skill emphasize animating transform properties over layout properties?

Animating transform properties like x, y, and scale is GPU-accelerated, ensuring 60fps performance, whereas animating properties like width or height triggers expensive layout reflows.

Does it support imperative animation control?

Yes, the skill includes patterns for useAnimation, allowing you to programmatically trigger complex sequences or handle animations via external events.

Web Motion & Framer Motion Animations

Name: Web Motion & Framer Motion Animations
Author: agents-inc

byagents-inc

0•

デザインツール

Implements declarative, high-performance React animations using Framer Motion patterns for fluid UI transitions, gestures, and layout changes.

The Web Animation Framer Motion skill provides a comprehensive suite of declarative animation patterns for React applications using the Motion library. It enables developers to easily implement complex orchestrated sequences via variants, smooth exit animations with AnimatePresence, and high-performance layout transitions using the FLIP technique. By focusing on GPU-accelerated transform properties and built-in accessibility for reduced motion, this skill ensures that animations are not only visually stunning and interactive but also performant and inclusive across all devices, following the latest v11 and v12 library standards.

主な機能

01Interactive gesture-based animations for hover, tap, drag, and focus states

02Scroll-linked and scroll-triggered effects with useScroll and whileInView

03Hardware-accelerated layout and shared element transitions via layoutId

04Fluid exit animations and page transitions powered by AnimatePresence

050 GitHub stars

06Orchestrated sequences using reusable animation variants and staggered children

ユースケース

01Creating seamless page transitions and modal entry/exit sequences for SPAs

02Implementing complex scroll-driven storytelling components or parallax marketing sections

03Building interactive dashboards with staggered list animations and micro-interactions

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

主な機能

01Interactive gesture-based animations for hover, tap, drag, and focus states

02Scroll-linked and scroll-triggered effects with useScroll and whileInView

03Hardware-accelerated layout and shared element transitions via layoutId

04Fluid exit animations and page transitions powered by AnimatePresence

050 GitHub stars

06Orchestrated sequences using reusable animation variants and staggered children

ユースケース

01Creating seamless page transitions and modal entry/exit sequences for SPAs

02Implementing complex scroll-driven storytelling components or parallax marketing sections

03Building interactive dashboards with staggered list animations and micro-interactions