Dominio de Animaciones GSAP – De Cero a Producción

// Esto es todo lo que necesitas para animar cualquier cosa, en cualquier lugar
gsap.to('.box', { x: 100, rotation: 360, duration: 1 });

// main.js
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Registrar plugins
gsap.registerPlugin(ScrollTrigger);

// ¡Animar!
gsap.to('.box', {
	x: 200,
	rotation: 360,
	duration: 2,
	ease: 'power2.inOut',
});

// Métodos básicos de tween
gsap.to(target, vars); // Animar HACIA valores
gsap.from(target, vars); // Animar DESDE valores
gsap.fromTo(target, fromVars, toVars); // Inicio y fin explícitos

// Ejemplos
gsap.to('.box', { x: 100, duration: 1 }); // Mover a la derecha
gsap.from('.box', { opacity: 0, duration: 1 }); // Fade in
gsap.fromTo('.box', { scale: 0, rotation: -180 }, { scale: 1, rotation: 0, duration: 1 });

gsap.to('.element', {
	// Transformaciones CSS (¡más rápidas!)
	x: 100, // translateX
	y: 50, // translateY
	rotation: 45, // rotar en grados
	scale: 1.5, // escala uniforme
	scaleX: 2, // estiramiento horizontal

	// Propiedades CSS
	opacity: 0.5,
	backgroundColor: '#ff0000',
	borderRadius: '50%',

	// Atributos SVG
	attr: { cx: 100, cy: 50, r: 30 },

	// Timing
	duration: 2, // segundos
	delay: 0.5, // retraso antes de iniciar
	ease: 'power2.out', // función de easing

	// Callbacks
	onStart: () => console.log('¡Iniciado!'),
	onComplete: () => console.log('¡Terminado!'),
	onUpdate: () => console.log('Animando...'),
});

// ❌ Infierno de callbacks
gsap.to('.box1', {
	x: 100,
	duration: 1,
	onComplete: () => {
		gsap.to('.box2', {
			y: 100,
			duration: 1,
			onComplete: () => {
				gsap.to('.box3', { rotation: 360, duration: 1 });
			},
		});
	},
});

// ✅ Limpio y mantenible
const tl = gsap.timeline();

tl
	.to('.box1', { x: 100, duration: 1 })
	.to('.box2', { y: 100, duration: 1 })
	.to('.box3', { rotation: 360, duration: 1 });

const tl = gsap.timeline({
	defaults: { duration: 1, ease: 'power2.inOut' }, // Aplicar a todos los hijos
	repeat: 2, // Repetir toda la secuencia
	yoyo: true, // Reproducir hacia adelante y luego hacia atrás
	paused: true, // Iniciar pausado (controlar con JS)
});

// Posicionamiento relativo
tl
	.to('.a', { x: 100 })
	.to('.b', { x: 100 }, '-=0.5') // Iniciar 0.5s antes de que termine el anterior
	.to('.c', { x: 100 }, '<') // Iniciar con el anterior
	.to('.d', { x: 100 }, '>'); // Iniciar después del anterior (por defecto)

// Labels para timing complejo
tl
	.add('escenaUno')
	.to('.hero', { scale: 1.2, duration: 1 })
	.to('.title', { opacity: 1, y: 0 }, 'escenaUno+=0.5') // 0.5s después del label
	.add('escenaDos', '+=1')
	.to('.hero', { scale: 1, duration: 1 }, 'escenaDos');

// Controlar el timeline
tl.play(); // Reproducir desde posición actual
tl.pause(); // Pausar
tl.restart(); // Iniciar desde el principio
tl.reverse(); // Reproducir hacia atrás
tl.seek(2); // Saltar a 2 segundos
tl.timeScale(2); // Doble velocidad

// Linear (robótico - evitar a menos que sea intencional)
gsap.to('.box', { x: 100, ease: 'linear' });

// Power eases (más comunes)
gsap.to('.box', { x: 100, ease: 'power1.out' }); // Desaceleración sutil
gsap.to('.box', { x: 100, ease: 'power2.out' }); // Desaceleración suave
gsap.to('.box', { x: 100, ease: 'power3.out' }); // Desaceleración fuerte
gsap.to('.box', { x: 100, ease: 'power4.out' }); // Desaceleración dramática

// Elastic (rebotante)
gsap.to('.box', { x: 100, ease: 'elastic.out(1, 0.3)' });

// Back (ligero sobrepaso)
gsap.to('.box', { x: 100, ease: 'back.out(1.7)' });

// Bounce (físico)
gsap.to('.box', { x: 100, ease: 'bounce.out' });

// Cubic-bezier personalizado
gsap.to('.box', { x: 100, ease: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' });

// Stagger básico
gsap.to('.card', {
	y: 0,
	opacity: 1,
	duration: 0.6,
	stagger: 0.1, // 0.1s entre cada tarjeta
});

// Opciones avanzadas de stagger
gsap.to('.card', {
	y: 0,
	opacity: 1,
	duration: 0.6,
	stagger: {
		amount: 1.5, // Tiempo total para escalonar (distribuido uniformemente)
		from: 'center', // 'start', 'center', 'end', 'edges', 'random', index
		grid: [3, 4], // Para layouts de grid [filas, cols]
		axis: 'x', // Escalonar a lo largo del eje x
		ease: 'power2.inOut',
	},
});

// Stagger desde índice específico
gsap.to('.item', {
	scale: 1.2,
	duration: 0.3,
	stagger: {
		each: 0.05,
		from: 5, // Iniciar desde índice 5
	},
});

// Stagger basado en función (control último)
gsap.to('.item', {
	y: -20,
	duration: 0.5,
	stagger: {
		each: 0.1,
		from: 'center',
		onStart: function () {
			console.log('Animando:', this.targets()[0]);
		},
	},
});

// Registrar el plugin
gsap.registerPlugin(ScrollTrigger);

// Animación básica activada por scroll
gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',       // Elemento a observar
    start: 'top center',   // Cuando el top del trigger llega al center del viewport
    end: 'bottom center',  // Cuando el bottom del trigger llega al center
    scrub: true,           // Animar en sincronía con el scroll
    markers: true          // Mostrar marcadores visuales (debugging)
  }
});

// Posiciones start/end explicadas:
// Formato: "posiciónTrigger posiciónViewport"
// Trigger: top, center, bottom, o pixels/porcentaje
// Viewport: top, center, bottom, o pixels/porcentaje

// Ejemplos
scrollTrigger: {
  start: 'top 80%',      // Cuando top del trigger llega al 80% del viewport
  end: 'bottom 20%',     // Cuando bottom llega al 20% del viewport
}

// Timeline con ScrollTrigger
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    start: 'top top',
    end: 'bottom top',
    scrub: 1,            // Scrubbing suave (1 segundo de lag)
    pin: true,           // Pin el elemento trigger
    anticipatePin: 1     // Pinning suave
  }
});

tl.to('.hero', { scale: 1.5, duration: 1 })
  .to('.hero', { opacity: 0, duration: 1 });

// Toggle de clase en scroll
ScrollTrigger.create({
  trigger: '.section',
  start: 'top center',
  end: 'bottom center',
  onEnter: () => console.log('Enter'),
  onLeave: () => console.log('Leave'),
  onEnterBack: () => console.log('Enter back'),
  onLeaveBack: () => console.log('Leave back'),
  toggleClass: { targets: '.section', className: 'is-active' }
});

// Efecto parallax
gsap.to('.bg', {
  y: 300,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true
  }
});

// Método CSS (limitado)
gsap.to('.path', {
	strokeDashoffset: 0,
	duration: 2,
});

// Plugin DrawSVG (requiere membresía Club GreenSock)
gsap.from('.path', {
	drawSVG: 0, // Dibujar desde 0% hasta 100%
	duration: 2,
	ease: 'power1.inOut',
});

// Dibujar desde el centro hacia fuera
gsap.from('.path', {
	drawSVG: '50% 50%', // Iniciar en el centro
	duration: 2,
});

// Efecto de firma animada
const tl = gsap.timeline();
tl
	.from('.sig-path-1', { drawSVG: 0, duration: 0.8 })
	.from('.sig-path-2', { drawSVG: 0, duration: 0.6 }, '-=0.2')
	.from('.sig-path-3', { drawSVG: 0, duration: 0.5 }, '-=0.2');

// Plugin MorphSVG (requiere Club GreenSock - $99/año)
gsap.to('#circle', {
	morphSVG: '#star', // Transformar círculo en estrella
	duration: 2,
	ease: 'power2.inOut',
});

// Alternativa gratuita: Animar puntos individuales del path
gsap.to('.morph-path', {
	attr: { d: 'M100,50 L150,100 L50,100 Z' }, // Nueva definición de path
	duration: 2,
	ease: 'power2.inOut',
});

// Animar elementos SVG con origen de transformación
gsap.to('.svg-circle', {
	rotation: 360,
	scale: 1.5,
	transformOrigin: '50% 50%', // Centro del elemento
	duration: 2,
	ease: 'back.out(1.7)',
});

// Animar a lo largo de un path (plugin MotionPath)
gsap.to('.dot', {
	motionPath: {
		path: '#path', // Path SVG a seguir
		align: '#path', // Alinear a la tangente del path
		autoRotate: true, // Rotar para coincidir con la dirección del path
		alignOrigin: [0.5, 0.5], // Centro del elemento
	},
	duration: 5,
	ease: 'none',
	repeat: -1,
});

let mouse = { x: 0, y: 0 };
let cursor = { x: 0, y: 0 };

window.addEventListener('mousemove', (e) => {
	mouse.x = e.clientX;
	mouse.y = e.clientY;
});

// Seguimiento suave con quickTo de GSAP
const xTo = gsap.quickTo('.cursor', 'x', { duration: 0.6, ease: 'power3' });
const yTo = gsap.quickTo('.cursor', 'y', { duration: 0.6, ease: 'power3' });

gsap.ticker.add(() => {
	xTo(mouse.x);
	yTo(mouse.y);
});

const buttons = gsap.utils.toArray('.btn');

buttons.forEach((btn) => {
	const icon = btn.querySelector('.icon');

	btn.addEventListener('mouseenter', () => {
		gsap.to(icon, {
			x: 5,
			rotation: 15,
			duration: 0.3,
			ease: 'back.out(2)',
		});
	});

	btn.addEventListener('mouseleave', () => {
		gsap.to(icon, {
			x: 0,
			rotation: 0,
			duration: 0.3,
			ease: 'power2.out',
		});
	});
});

gsap.registerPlugin(Draggable);

Draggable.create('.box', {
	type: 'x,y', // Arrastrar en cualquier dirección
	bounds: '.container', // Restringir al contenedor
	inertia: true, // Momento basado en física
	onDrag: function () {
		console.log(this.x, this.y);
	},
});

// Ajustar a cuadrícula
Draggable.create('.box', {
	type: 'x,y',
	snap: {
		x: (value) => Math.round(value / 50) * 50, // Cuadrícula de 50px
		y: (value) => Math.round(value / 50) * 50,
	},
});

// ✅ BUENO: Animar transformaciones y opacidad (acelerado por GPU)
gsap.to('.box', { x: 100, y: 50, rotation: 45, opacity: 0.5 });

// ❌ MALO: Animar propiedades de layout (provoca reflow)
gsap.to('.box', { top: 100, left: 50, width: 200 });

// Usar will-change para animaciones complejas
gsap.set('.animated', { willChange: 'transform, opacity' });

// Limpiar will-change al terminar
tl.to('.box', { /* animación */ })
  .call(() => gsap.set('.box', { clearProps: 'willChange' }));

// Agrupar lecturas del DOM para prevenir layout thrashing
const positions = gsap.utils.toArray('.item').map(el => {
  return { x: el.offsetLeft, y: el.offsetTop };
});

// Luego animar con esos valores
positions.forEach((pos, i) => {
  gsap.from('.item')[i], { x: pos.x, y: pos.y });
});

// Usar invalidateOnRefresh para animaciones responsive
ScrollTrigger.create({
  trigger: '.section',
  start: 'top top',
  end: () => `+=${document.querySelector('.section').offsetHeight}`,
  invalidateOnRefresh: true  // Recalcular al redimensionar ventana
});

// Habilitar herramientas de depuración de GSAP
GSAPDebugger.create();

// Registrar progreso del timeline
tl.eventCallback('onUpdate', () => {
	console.log('Progreso:', tl.progress());
});

// Visualizar marcadores de ScrollTrigger
ScrollTrigger.create({
	trigger: '.section',
	markers: {
		startColor: 'green',
		endColor: 'red',
		fontSize: '18px',
		fontWeight: 'bold',
		indent: 20,
	},
});

// Verificar conflictos de animación
gsap.globalTimeline.getChildren().forEach((tween) => {
	console.log('Target:', tween.targets(), 'Progreso:', tween.progress());
});

// Feedback de clic en botón
function animateButton(btn) {
	const tl = gsap.timeline();

	tl.to(btn, { scale: 0.95, duration: 0.1 }).to(btn, { scale: 1, duration: 0.2, ease: 'back.out(3)' });

	return tl;
}

document.querySelectorAll('.btn').forEach((btn) => {
	btn.addEventListener('click', () => animateButton(btn));
});

function pageTransition() {
	const tl = gsap.timeline();

	// Animación de salida
	tl.to('.old-content', {
		opacity: 0,
		y: -50,
		duration: 0.4,
		ease: 'power2.in',
	});

	// Animación de entrada
	tl.from(
		'.new-content',
		{
			opacity: 0,
			y: 50,
			duration: 0.6,
			ease: 'power2.out',
		},
		'-=0.2'
	);

	return tl;
}

function loadingAnimation() {
	const tl = gsap.timeline();

	// Escalonar entrada de elementos del logo
	tl.from('.logo-path', {
		drawSVG: 0,
		duration: 1,
		stagger: 0.2,
		ease: 'power2.out',
	});

	// Fade in del texto
	tl.from(
		'.brand-name',
		{
			opacity: 0,
			y: 20,
			duration: 0.8,
			ease: 'power3.out',
		},
		'-=0.5'
	);

	// Escalar y ocultar
	tl.to(
		'.loader',
		{
			scale: 3,
			opacity: 0,
			duration: 0.8,
			ease: 'power4.in',
		},
		'+=0.5'
	);

	return tl;
}

const camera = new THREE.PerspectiveCamera(/*...*/);

gsap.to(camera.position, {
	z: 10,
	scrollTrigger: {
		trigger: '.section',
		start: 'top top',
		end: 'bottom top',
		scrub: true,
	},
});

const recognition = new webkitSpeechRecognition();

recognition.onresult = (event) => {
	const command = event.results[0][0].transcript;

	if (command.includes('explotar')) {
		explodeAnimation();
	}
};

// Verificación de accesibilidad
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
	gsap.globalTimeline.timeScale(100); // Animaciones instantáneas
	// O deshabilitar completamente:
	// gsap.config({ force3D: false, autoSleep: 60 });
}