math-motion-gsap

name	math-motion-gsap
description	Reglas estrictas de rendimiento y arquitectura para animar React con GSAP 3 en el proyecto Math Got Motion.

Math Got Motion: GSAP Animation Guidelines

Cuando escribas código de animación para este proyecto, debes seguir estrictamente estas reglas para garantizar 60 fps fluidos en Tauri/Móvil.

1. Integración con React

• DEBES usar el hook @gsap/react (useGSAP) para todas las animaciones.
• NUNCA uses useEffect plano para instanciar timelines de GSAP.
• Pasa un objeto scope (referencia de React) al hook useGSAP para aislar los selectores al componente actual.

2. Reglas de Rendimiento (Cero Layout Thrashing)

• SOLO TIENES PERMITIDO animar propiedades de composición: x, y, scale, rotation y opacity.
• ESTÁ ESTRICTAMENTE PROHIBIDO animar propiedades que causen repaints del DOM: width, height, top, left, margin, padding.
• Los caracteres individuales que se separan de la fórmula DEBEN estar envueltos en elementos con display: inline-block o position: absolute para que GSAP pueda transformarlos sin afectar el flujo del documento.

3. Limpieza de Memoria (Cleanup)

• El uso de useGSAP maneja el cleanup automáticamente, pero si creas instancias de ScrollTrigger fuera de este scope, DEBES matarlas (.kill()) cuando el componente se desmonte.

4. Estilo de Animación

• Utiliza easings elásticos o personalizados (elastic.out(1, 0.75)) para el efecto "bounce" de las letras.
• Usa la propiedad stagger de GSAP en lugar de múltiples animaciones separadas cuando animes la aparición de los textos explicativos.