Movimiento
Nada cambia en un salto, y nada se mueve a menos que alguien lo pida. Vinculado a la energía (lo que ocurre se ve ocurriendo) y al "nunca ruidoso".
En esta página
Cada cambio de estado es una transición
Colores de día a noche, espacio cuando cambia la densidad, tamaño cuando crece el contenido, hover. Una duración y una curva que comienza suave y aterriza suave. Ya Feitio hace esto en cada elemento con su CSS base.
320ms, cubic-bezier(0.3, 0, 0.2, 1)Comienza suave, acelera en el medio y aterriza sin sobrepasar.
260ms, cubic-bezier(0.2, 0.9, 0.3, 1.25)Deja rápido y pasa ligeramente por el final antes de asentarse: el pequeño rebote del papel al tocar la mesa.
Papel colocado
Así llegan las cosas flotantes: un recorte que se asienta en la mesa, con una ligera rotación y la sombra formando, con un pequeño rebote. Solo cuando alguien actúa.
Un papel a la vez
Cuando una acción hace aparecer varias cosas, solo una llega como papel colocado: la que habla con la persona, como el aviso de que funcionó. Las demás deslizan, como una nueva fila en una lista, que abre espacio y empuja a las de abajo. Dos papeles aterrizando a la vez compiten por la vista y parecen un desorden.
Moción reducida
Cuando el sistema pide menos movimiento, no hay ninguno. Sin transición, sin papel colocado.
Nada se mueve a menos que alguien lo pida
Do
La animación que responde a alguien muestra lo que cambió.
Don’t
La animación que nadie pidió es ruido: cansa y distrae.
Donde la transición se apaga
Las cosas que se mueven cada instante, como arrastrar, dibujar, redimensionar o hacer scroll en una lista enorme, no pueden esperar 320ms: la pieza quedaría atrás del dedo. En esas áreas, data-motion="direct" apaga la transición. Fuera de ellas, rige la regla.
data-motion="direct"Arrastrar