Does it support exit animations for disappearing elements?

Yes, it covers AnimatePresence implementation, which allows components to animate smoothly when they are removed from the React component tree.

Can I use this for scroll-triggered effects?

Absolutely. The skill includes specific patterns for both 'whileInView' triggers and scroll-linked values using useScroll and useTransform.

Does this skill help with complex animation sequencing?

Yes, it provides implementation patterns for Variants and the useAnimate hook to handle complex, multi-step animation sequences and orchestration.

Are gesture-based interactions like dragging included?

Yes, the skill provides comprehensive guidance on drag constraints, elasticity, momentum, and gesture event handling (hover, tap, and focus).

Framer Motion Animations

Name: Framer Motion Animations
Author: tadams95

bytadams95

0•

디자인 도구

Implements production-grade UI animations and interactive motion effects using the Framer Motion library for React.

This skill equips Claude with specialized knowledge to build high-performance, declarative animations within React applications. It provides standardized patterns for everything from simple property transitions and spring-based physics to complex orchestration using variants and staggered children. By leveraging this skill, developers can quickly implement advanced interactive features like gesture-driven drag-and-drop, scroll-linked parallax effects, and smooth shared-layout transitions, ensuring a polished and modern user experience with minimal manual CSS overhead.

주요 기능

01AnimatePresence support for seamless exit animations and layout transitions

020 GitHub stars

03Declarative animation syntax for motion components and property transitions

04Advanced orchestration using variants and automated staggered child animations

05Scroll-driven animation patterns including parallax and visibility triggers

06Interactive gesture support for hover, tap, focus, and physics-based dragging

사용 사례

01Building interactive dashboards with fluid state transitions and loading skeletons

02Creating engaging landing pages with scroll-triggered entrance animations

03Developing polished UI components like modals, accordions, and animated tab systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tadams95/kardashev-network framer-motion

For use in Claude.ai and ChatGPT

Download Skill