Postat acum 1 zi
tsx
// Stagger list
<motion.ul variants={container} initial="hidden" animate="visible">
{items.map((i) => (
<motion.li key={i.id} variants={item}>{i.name}</motion.li>
))}
</motion.ul>
const container = {
hidden: {},
visible: { transition: { staggerChildren: 0.06 } }
};
const item = {
hidden: { opacity: 0, y: 10 },
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } }
};Diferența între "animație amatoare" și "animație premium" e de obicei în 3 detalii.
1. Stagger children
Când ai o listă, întârzii fiecare item cu 50-80ms. Efect imediat premium.
2. layoutId
Animații între elemente cu același layoutId = shared element transitions gratis. Magie la deschiderea unui card.
3. Gesture-based cu useMotionValue
Drag-urile "elastice" care revin cu spring, nu cu tween linear. Face diferența.
Small detail mare
ease: 'easeInOut'batoclinear- Durate 300-450ms, nu 1000ms
- Respectă
prefers-reduced-motion