Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
The `framer-motion-animator` skill provides developers with a streamlined way to create smooth, interactive animations and micro-interactions within React applications using Framer Motion. It addresses the challenge of implementing complex, visually appealing animations without manually handling low-level DOM manipulations or timing logic. By leveraging Framer Motion's declarative API, this skill simplifies the process of animating components, managing page transitions, handling gestures, and orchestrating sequences, making UI development more efficient and visually engaging.
Key features of this skill include support for simple and variant-based animations, hover and gesture interactions, scroll-based animations, and orchestrated sequences with staggered or delayed effects. Developers can define motion values such as opacity, scale, position, and rotation, and apply transitions using duration, easing, or spring physics. The skill also integrates AnimatePresence for exit animations, allowing components to smoothly enter and leave the DOM. Interactive variants enable responsive animations based on user interactions, including hover, tap, or disabled states, while optimization ensures performance through GPU-accelerated properties.
This skill is ideal for front-end developers, UI/UX designers, and React enthusiasts looking to enhance the interactivity and polish of their applications. It is particularly useful for projects requiring engaging page transitions, animated modals, interactive buttons, or dynamic lists with staggered entrances. Target users can range from professional developers building production-grade applications to hobbyists experimenting with animation effects, providing a flexible and powerful toolset for crafting responsive, high-quality animations with minimal boilerplate.
You can install Framer Motion, which powers this skill, using `npm install framer-motion`. Then, import `motion` and optionally `AnimatePresence` from 'framer-motion' to create animations within your React components.
The skill supports simple entrance/exit animations, hover and tap interactions, gesture-based animations, scroll-triggered effects, and orchestrated sequences using variants with staggered or delayed transitions.
It works with React projects that support hooks and functional components, which generally includes React 16.8 and later.
Yes, to maintain smooth performance, it is recommended to animate GPU-accelerated properties like transform and opacity and minimize unnecessary re-renders of animated components.
Yes, by using AnimatePresence, you can define exit animations that trigger when components are removed from the DOM, allowing for smooth transitions in modals, lists, or page changes.
Quick Setup:
.claude/skills/Repository
patricio0312rev/skills