Guías · 01

Transiciones

Cada componente recibe una transition: una curva de tiempo o un resorte. Cómo elegir y qué pasa cuando se interrumpe un movimiento.

Dos tipos de transición

Una transición es { duration, easing } o { tempo: 'spring', spring }. Pásala a la prop transition de cualquier componente. Los componentes que mueven varias cosas a la vez reciben una segunda prop, como layoutTransition en MotionList para los elementos que se deslizan a su nueva posición.

transitions.js

// Timing: a duration and a curve.
{ duration: 300, easing: 'easeOut' }
{ duration: 600, easing: [0.22, 1, 0.36, 1] }

// Spring: physics that keeps its speed when interrupted.
{ tempo: 'spring', spring: { stiffness: 260, damping: 12 } }

// Spring with duration: calibrated to settle exactly then.
{ tempo: 'spring', spring: { stiffness: 260, damping: 12 }, duration: 500 }

Resortes con duración

Un resorte normalmente dura lo que necesite su física. Añade duration y el resorte se calibra para asentarse exactamente en ese momento, conservando su carácter (cuánto rebota) y ajustándose a tus tiempos. Compara curvas de tiempo y resortes sobre los mismos tres componentes de abajo.

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionNumber,
  ProgressBar,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const stops = [
  { id: 'low', label: 'Low', value: 12 },
  { id: 'mid', label: 'Mid', value: 58 },
  { id: 'high', label: 'High', value: 96 },
];

export default function App({
  tempo = 'spring',
  spring = 'basic',
  easing = 'expoOut',
  duration = 600,
}) {
  const [stop, setStop] = useState('mid');
  const value = stops.find((item) => item.id === stop).value;

  // One transition object drives all three components.
  const transition =
    tempo === 'spring'
      ? { ...motionTokens.spring[spring], duration: duration || undefined }
      : { ...motionTokens.easing[easing], duration };

  return (
    <div className="lab">
      <MotionHighlight
        items={stops}
        value={stop}
        onValueChange={setStop}
        transition={transition}
        className="stops"
        itemClassName="stop"
        highlightClassName="stop-on"
      />
      <MotionNumber className="value" value={value} suffix="%" transition={transition} />
      <ProgressBar
        value={value}
        thickness={12}
        color="#176b52"
        trackColor="#eaf6f0"
        transition={transition}
        className="bar"
      />
      <p className="hint">
        Click another stop before the motion ends: it turns around from where it is.
      </p>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 20px;
}

.stops {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.stop {
  min-width: 72px;
  min-height: 42px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.stop-on {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.value {
  font:
    800 64px/1 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.bar {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Interrupciones

Cada componente empieza un nuevo movimiento desde lo que se ve en pantalla. Un resorte además conserva su velocidad actual, así que un segundo clic invierte el movimiento con suavidad. Una curva de tiempo vuelve a empezar desde la posición actual con una curva nueva.

Números: un valor nuevo continúa desde los glifos que hay en pantalla.
Altura y cambios: el tamaño continúa desde el tamaño en pantalla.
Listas: los elementos que se mueven a una nueva posición conservan su velocidad.

Transiciones listas para usar

motionTokens reúne unas cuantas sensaciones coherentes: cuatro resortes, cuatro curvas de tiempo y cuatro duraciones. Son objetos normales, así que puedes expandir uno para cambiar un solo campo.

tokens.js

import { motionTokens } from '@kkwaenggwari/animated-chorus';

motionTokens.spring.quick; // snappy UI feedback
motionTokens.spring.basic; // the default feel
motionTokens.spring.gentle; // panels and height
motionTokens.spring.bouncy; // playful numbers
motionTokens.easing.expoOut; // { duration: 420, easing: 'expoOut' }
motionTokens.duration.fast; // 140

Nombres de easing

easing acepta linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut o un array de Bézier cúbica como [0.22, 1, 0.36, 1].