Ejemplo · WebGL

Un cubo movido por tweens

La rotación, inclinación y escala del cubo viven en un objeto plano; GSAP lo anima como cualquier otra cosa. Un tween lineal infinito lo gira, dos setters quickTo lo inclinan hacia el puntero, Pulso golpea la escala, y el loop de render es un callback de gsap.ticker que la limpieza devuelta se encarga de quitar.

gsap.tickerquickTocleanup functions

mueve el puntero para inclinar el cubo

cube.ts

rot = { spin: 0.6, tiltX: 0, tiltY: -0.35, scale: 1 };

ref = injectGsap(({ gsap }) => {
  // …compile shaders, upload the cube…
  const render = () => {
    gl.uniformMatrix4fv(uMvp, false, mvp(this.rot));
    gl.drawArrays(gl.TRIANGLES, 0, 36);
  };
  gsap.ticker.add(render);

  // endless spin on a plain object
  gsap.to(this.rot, {
    spin: '+=6.28', duration: 10,
    repeat: -1, ease: 'none',
  });

  // one reusable tween per tilt axis
  this.tiltToX = gsap.quickTo(this.rot, 'tiltX',
    { duration: 0.6, ease: 'power3' });

  return () => gsap.ticker.remove(render);
});

pulse = this.ref.contextSafe(() =>
  this.ref.gsap.fromTo(this.rot,
    { scale: 1.45 },
    { scale: 1, ease: 'elastic.out(1, 0.45)' })
);

Cómo funciona

Aquí no hay librería 3D: solo un objeto plano { spin, tiltX, tiltY, scale } y una matriz hecha a mano. A GSAP no le importa: para él, los ángulos de rotación son propiedades en el tiempo, igual que un pixel de CSS.
El giro infinito es gsap.to(rot, { spin: '+=6.28', repeat: -1, ease: 'none' }); la inclinación del puntero son dos setters quickTo, así que cientos de eventos por segundo reutilizan un tween por eje.
El dibujado ocurre en un callback de gsap.ticker, un solo loop de frames compartido con el resto de los tweens, fuera de change detection. El callback devuelve una limpieza y el contexto la ejecuta al destruir: el loop de GL no puede sobrevivir al componente.