Saltar al contenido

Duración

Beta

La escala de tiempos del sistema y cuándo usar cada paso.

La regla general: más grande el elemento (o más lejos viaja), más larga la duración. Un hover no puede tardar lo que tarda un drawer.

Escala

Reproducí todas juntas para sentir la diferencia relativa.

Todas con ease-move — click para comparar
instant100ms
Oficial
fast200ms
Oficial
base300ms
Oficial
slow500ms
Oficial
slower800ms
Oficial

Reglas de uso

  • Micro-feedback (hover, focus): instant — si se nota la animación, es lenta.
  • Todo lo que aparece/desaparece en el flujo de lectura: fast o base.
  • slower solo para coreografías (como el hero del landing) — nunca para responder a una acción del usuario.
  • prefers-reduced-motion no es opcional: toda animación del sistema se desactiva o reduce con gsap.matchMedia() o la variante motion-reduce:.