Animaciones que no rebotan y que puedes interrumpir a la mitad
Si tocas un control dos veces seguidas y la animación vuelve a empezar desde cero, se siente rota. Así sigue el movimiento de este sitio desde donde estaba, y por qué ningún control rebota.
Toca un interruptor y la perilla se desliza. Tócalo otra vez cuando va a la mitad. Si la perilla regresa al inicio y sale de nuevo desde ahí, algo se siente roto, aunque la animación completa se vea preciosa.
Eso pasa cuando el movimiento es una curva con duración fija: 300 milisegundos de un punto a otro. Si cambias de idea a media curva, ella no sabe dónde estaba la perilla ni qué tan rápido iba. Empieza de nuevo.
Seguir desde donde estaba
Un resorte no piensa en tiempo, piensa en destino. La perilla quiere llegar a un lugar y, en cada instante, conoce dos cosas: dónde está y a qué velocidad va. Si cambias el destino a la mitad, esas dos cosas se conservan y solo cambia hacia dónde tira el resorte. La perilla frena y regresa como lo haría un objeto con peso, sin salto y sin reinicio.
Lo pruebo de una forma poco elegante: invierto el movimiento cada 100 milisegundos durante un segundo y reviso que la posición nunca pegue un brinco. Una trampa común es una transition de CSS con curva elástica. Se siente a resorte, pero sigue siendo una curva con duración. Si alguien puede revertirla a la mitad, necesita un resorte de verdad.
Por qué ninguno rebota
Un resorte rebota o no según cuánto lo frenes. Hay un punto exacto, el amortiguamiento crítico, en el que llega lo más rápido posible sin pasarse ni un poco. Los resortes de los controles de este sitio (presiones, perillas, pestañas, hojas) están en ese punto o por encima, así que llegan y se quedan quietos.
El rebote en un botón se siente a juguete. Lo ves una vez y da gracia; lo tocas todos los días y estorba. Por eso en el archivo de movimiento solo hay un resorte que rebota, con nombre propio para que nadie lo use por descuido: es para una celebración que pasa una vez y termina, y se pasa de su destino apenas 1.5 %. Nunca va en un control.
Todos los resortes viven en ese único archivo. Los de los controles salen del esquema de movimiento de Material 3: uno para lo que se mueve y otro, más rígido, para la opacidad, así un desvanecido nunca se queda atrás del movimiento al que acompaña. Lo que sigue al puntero o al scroll, como el parallax del retrato de la portada, usa resortes afinados a mano, y esos tampoco rebotan.
Cuando algo se mueve en pantalla quiero que obedezca a la mano. Si la mano cambia de idea, el movimiento cambia con ella.