Designing Premium UI Animations with Framer Motion
Web animations should be subtle, meaningful, and performant. Bloated scripts that cause layout shifts look unprofessional. Framer Motion—a production-ready animation library for React—allows us to build physics-based UI transitions.
---
1. Utilizing Custom Animation Variants
Variants let you extract animation properties from components into clean, reusable structures. This keeps layout components clean and easy to maintain:
``typescript`
const containerVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { staggerChildren: 0.1 }
}
};
---
2. Animating Entry and Exit of Lists
Animating item entry and exit can look jarring without the correct layout flags. We use AnimatePresence and the layout prop to smooth item transitions:
`typescript
import { motion, AnimatePresence } from 'framer-motion';
{items.map(item => (
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
key={item.id}
>
{item.content}
))}
``
These techniques deliver interactive interfaces that feel fast, alive, and highly polished.