Animation Patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations...
Install
npx skills add vibeeval/vibecosystem --skill animation-patterns -g -a claude-code -y- Repository
- vibeeval/vibecosystem541
- Category
- Design
- Updated
- 3mo ago
- License
- MIT
- Context cost
- Mediumabout 2,915 tokens
- Runs scripts
- No, instructions only
What it does
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
Animation Patterns
Framer Motion patterns for production-quality React animations.
Framer Motion Basics (motion components, variants)
// 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
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, ease: 'easeOut' } },
exit: { opacity: 0, x: 8, transition: { duration: 0.15, ease: 'easeIn' } },
}
// app/layout.tsx (Next.js App Router)
export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
return (
<html>
<body>
<AnimatePresence mode="wait">
<motion.main
key={pathname}
variants={pageVariants}
initial="initial"
animate="enter"
exit="exit"
>
{children}
</motion.main>
</AnimatePresence>
</body>
</html>
)
}
