Ejemplo · Observer + Inertia + MotionPath

Un bucle con impulso

Rueda, arrastra o desliza en cualquier parte del escenario y las fichas recorren la pista; da un tirón y suelta, e InertiaPlugin las deja deslizándose con tu velocidad real. Un Observer normaliza cada entrada, y todo el bucle es un solo número que GSAP anima.

ObserverInertiaPluginMotionPath

SCROLL SPLIT FLIP MORPH DRAW MOTION OBSERVER INERTIA

rueda · arrastra · tirón · el impulso lo lleva

loop.ts

state = { p: 0 }; // the whole loop is one number

ref = injectGsap(({ gsap }) => {
  // paused motionPath tweens as position setters
  const setters = chips.map((chip, i) => {
    const t = gsap.to(chip, {
      motionPath: { path, align: path,
        alignOrigin: [0.5, 0.5] },
      ease: 'none', paused: true,
    });
    return (p) => t.progress((p + i / n) % 1);
  });
  const render = () =>
    setters.forEach((s) => s(this.state.p));

  const observer = Observer.create({
    target: stage,
    type: 'wheel,touch,pointer',
    onChange: (self) => {
      this.state.p -= self.deltaY * 0.00045;
      render();
    },
    onRelease: (self) =>
      // inertia on a plain number
      gsap.to(this.state, {
        inertia: {
          p: { velocity: -self.velocityY * 0.00045 },
        },
        onUpdate: render,
      }),
  });

  return () => observer.kill();
});

Cómo funciona

Cada ficha tiene un tween motionPath pausado usado como setter de posición: el estado del bucle es un número p, y cada ficha se pinta en p más su desfase. Mueves el número, se mueve todo el tren.
Observer fusiona rueda, touch y puntero en un solo stream. Mientras arrastras suma deltas a p; al soltar, la velocidad del gesto pasa a InertiaPlugin.
A InertiaPlugin no le importa que p no sea un elemento: gsap.to(state, { inertia: { p: { velocity } } }) desliza cualquier propiedad con fricción física, igual que los ladrillos lanzados en la página de Draggable.
Todo se crea dentro del callback: sal de la página y el Observer, los setters y la deriva ambiental se desmontan.