ivangdavila_frontend/animation.md

Animation — Frontend

Priority

One orchestrated page load > scattered micro-interactions.

High-Impact Moments

1. Staggered hero reveals — content fades in sequence
2. Scroll-triggered sections — elements enter on scroll
3. Hover state surprises — scale, shadow, color shift
4. Page transitions — smooth route changes

Framer Motion Example

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.div variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.div key={i} variants={item} />)}
</motion.div>

Timing Guidelines

Type	Duration
Interactions (hover, click)	150-300ms
Transitions (page, modal)	300-500ms
Complex sequences	500-800ms total

Accessibility

Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}