Create declarative animations and motion effects in React with the Motion library.
npx skills add https://github.com/tankpkg/skills --skill tank-framer-motion
Please help me install this Agent Skill. Skill: @tank/framer-motion Source: https://github.com/tankpkg/skills/tree/main/skills/framer-motion Command: npx skills add https://github.com/tankpkg/skills --skill tank-framer-motion
This Skill simplifies complex UI animations in React applications, making it easier to create engaging and performant user experiences without deep animation expertise.
animate, initial, and exit.layout prop and layoutId for shared element transitions.Animate a div to fade in and slide up when it enters the viewport.
High-intent search queries and answers about installing and using this skill.
Create declarative React animations by defining simple props like `animate`, `initial`, and `exit` to build engaging user experiences without writing complex code. This approach simplifies dynamic UI generation by handling transitions automatically.
Yes, you can animate React elements based on user interactions like hover, tap, and drag. This facilitates the creation of interactive user interfaces that respond immediately to gesture inputs.
The best way to handle scroll-linked effects in React is using the Motion library to map scroll progress directly to animation values. This ensures UI elements react dynamically to the viewport.
Optimize React animation performance for production by using production-ready patterns and performance optimizations provided by the Motion library. This ensures complex motion effects remain smooth and performant.
Animate a React component to fade in and slide up by declaratively defining its initial and animate states based on viewport entry. This creates smooth scroll-linked effects without deep animation expertise.
marktantongcoCreate declarative UI animations for React components using Motion v12.
fgarofalo56Creates UI animations with motion using Tailwind's built-in color palette.
xxihImplement React and Next.js patterns for component composition, state hooks, and performance.
DITEKmaxProvides declarative React animations including gestures, scroll effects, and layout transitions.