animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
npx skills add vibeeval/vibecosystem --skill animation-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Animation Patterns Framer Motion patterns for production-quality React animations. ## Framer Motion Basics (motion components, variants) ```typescript // Install: npm install framer-motion import { motion } from 'framer-motion' // Basic motion component <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, ease: 'easeOut' }} /> // Variants — define states, animate by name const cardVariants = { hidden: { opacity: 0, y: 20, scale: 0.98 }, visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.25, ease: [0.16, 1, 0.3, 1] }, }, hover: { y: -4, boxShadow: '0 12px 24px -4px rgb(0 0 0 / 0.15)', transition: { duration: 0.2 }, }, } function Card({ children }: { children: React.ReactNode }) { return ( <motion.div variants={cardVariants} initial="hidden" animate="visible" whileHover="hover" className="rounded-lg border bg-white p-4" > {children} </motion.div> ) } ``` ## Page Transitions with AnimatePresence ```typescript import { AnimatePresence, motion } from 'framer-motion' import { usePathname } from 'next/navigation' const pageVariants = { initial: { opacity: 0, x: -8 }, enter: { opacity: 1, x: 0, transition: { duration: 0.2,
- Framer Motion Basics (motion components, variants)
- Page Transitions with AnimatePresence
- Layout Animations (Shared Layout, Layout ID)
- Skeleton Loading Components
- Scroll-Linked Animations
- Staggered Children Animations
- Gesture Interactions (Drag, Tap, Hover)
- Reduced Motion Respect
- Performance Tips
What does the animation-patterns skill do?
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill animation-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.