GSAP Animation Mastery – From Zero to Production

// This is all you need to animate anything, anywhere
gsap.to('.box', { x: 100, rotation: 360, duration: 1 });

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

// Register plugins
gsap.registerPlugin(ScrollTrigger);

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

// Basic tween methods
gsap.to(target, vars); // Animate TO values
gsap.from(target, vars); // Animate FROM values
gsap.fromTo(target, fromVars, toVars); // Explicit start and end

// Examples
gsap.to('.box', { x: 100, duration: 1 }); // Move right
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', {
	// CSS transforms (faster!)
	x: 100, // translateX
	y: 50, // translateY
	rotation: 45, // rotate in degrees
	scale: 1.5, // uniform scale
	scaleX: 2, // horizontal stretch

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

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

	// Timing
	duration: 2, // seconds
	delay: 0.5, // delay before start
	ease: 'power2.out', // easing function

	// Callbacks
	onStart: () => console.log('Started!'),
	onComplete: () => console.log('Done!'),
	onUpdate: () => console.log('Animating...'),
});

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

// ✅ Clean and maintainable
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' }, // Apply to all children
	repeat: 2, // Repeat the entire sequence
	yoyo: true, // Play forward then backward
	paused: true, // Start paused (control with JS)
});

// Relative positioning
tl
	.to('.a', { x: 100 })
	.to('.b', { x: 100 }, '-=0.5') // Start 0.5s before previous ends
	.to('.c', { x: 100 }, '<') // Start with previous
	.to('.d', { x: 100 }, '>'); // Start after previous (default)

// Labels for complex timing
tl
	.add('sceneOne')
	.to('.hero', { scale: 1.2, duration: 1 })
	.to('.title', { opacity: 1, y: 0 }, 'sceneOne+=0.5') // 0.5s after label
	.add('sceneTwo', '+=1')
	.to('.hero', { scale: 1, duration: 1 }, 'sceneTwo');

// Control the timeline
tl.play(); // Play from current position
tl.pause(); // Pause
tl.restart(); // Start from beginning
tl.reverse(); // Play backward
tl.seek(2); // Jump to 2 seconds
tl.timeScale(2); // Double speed

// Linear (robotic - avoid unless intentional)
gsap.to('.box', { x: 100, ease: 'linear' });

// Power eases (most common)
gsap.to('.box', { x: 100, ease: 'power1.out' }); // Subtle deceleration
gsap.to('.box', { x: 100, ease: 'power2.out' }); // Smooth deceleration
gsap.to('.box', { x: 100, ease: 'power3.out' }); // Strong deceleration
gsap.to('.box', { x: 100, ease: 'power4.out' }); // Dramatic deceleration

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

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

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

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

// Basic stagger
gsap.to('.card', {
	y: 0,
	opacity: 1,
	duration: 0.6,
	stagger: 0.1, // 0.1s between each card
});

// Advanced stagger options
gsap.to('.card', {
	y: 0,
	opacity: 1,
	duration: 0.6,
	stagger: {
		amount: 1.5, // Total time to stagger (distributed evenly)
		from: 'center', // 'start', 'center', 'end', 'edges', 'random', index
		grid: [3, 4], // For grid layouts [rows, cols]
		axis: 'x', // Stagger along x-axis
		ease: 'power2.inOut',
	},
});

// Stagger from specific index
gsap.to('.item', {
	scale: 1.2,
	duration: 0.3,
	stagger: {
		each: 0.05,
		from: 5, // Start from index 5
	},
});

// Function-based stagger (ultimate control)
gsap.to('.item', {
	y: -20,
	duration: 0.5,
	stagger: {
		each: 0.1,
		from: 'center',
		onStart: function () {
			console.log('Animating:', this.targets()[0]);
		},
	},
});

// Register the plugin
gsap.registerPlugin(ScrollTrigger);

// Basic scroll-triggered animation
gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',       // Element to watch
    start: 'top center',   // When top of trigger hits center of viewport
    end: 'bottom center',  // When bottom of trigger hits center
    scrub: true,           // Animate in sync with scroll
    markers: true          // Show visual markers (debugging)
  }
});

// Start/End positions explained:
// Format: "triggerPosition viewportPosition"
// Trigger: top, center, bottom, or pixels/percentage
// Viewport: top, center, bottom, or pixels/percentage

// Examples
scrollTrigger: {
  start: 'top 80%',      // When top of trigger hits 80% down viewport
  end: 'bottom 20%',     // When bottom hits 20% down viewport
}

// Timeline with ScrollTrigger
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    start: 'top top',
    end: 'bottom top',
    scrub: 1,            // Smooth scrubbing (1 second lag)
    pin: true,           // Pin the trigger element
    anticipatePin: 1     // Smooth pinning
  }
});

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

// Toggle class on 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' }
});

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

// CSS method (limited)
gsap.to('.path', {
	strokeDashoffset: 0,
	duration: 2,
});

// DrawSVG plugin (requires Club GreenSock membership)
gsap.from('.path', {
	drawSVG: 0, // Draw from 0% to 100%
	duration: 2,
	ease: 'power1.inOut',
});

// Draw from center out
gsap.from('.path', {
	drawSVG: '50% 50%', // Start at center
	duration: 2,
});

// Animated signature effect
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');

// MorphSVG plugin (requires Club GreenSock - $99/year)
gsap.to('#circle', {
	morphSVG: '#star', // Morph circle into star
	duration: 2,
	ease: 'power2.inOut',
});

// Free alternative: Animate individual path points
gsap.to('.morph-path', {
	attr: { d: 'M100,50 L150,100 L50,100 Z' }, // New path definition
	duration: 2,
	ease: 'power2.inOut',
});

// Animate SVG elements with transform origin
gsap.to('.svg-circle', {
	rotation: 360,
	scale: 1.5,
	transformOrigin: '50% 50%', // Center of element
	duration: 2,
	ease: 'back.out(1.7)',
});

// Animate along a path (MotionPath plugin)
gsap.to('.dot', {
	motionPath: {
		path: '#path', // SVG path to follow
		align: '#path', // Align to path tangent
		autoRotate: true, // Rotate to match path direction
		alignOrigin: [0.5, 0.5], // Center of element
	},
	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;
});

// Smooth follow with GSAP quickTo
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', // Drag in any direction
	bounds: '.container', // Constrain to container
	inertia: true, // Physics-based momentum
	onDrag: function () {
		console.log(this.x, this.y);
	},
});

// Snap to grid
Draggable.create('.box', {
	type: 'x,y',
	snap: {
		x: (value) => Math.round(value / 50) * 50, // 50px grid
		y: (value) => Math.round(value / 50) * 50,
	},
});

// ✅ GOOD: Animate transforms and opacity (GPU-accelerated)
gsap.to('.box', { x: 100, y: 50, rotation: 45, opacity: 0.5 });

// ❌ BAD: Animate layout properties (triggers reflow)
gsap.to('.box', { top: 100, left: 50, width: 200 });

// Use will-change for complex animations
gsap.set('.animated', { willChange: 'transform, opacity' });

// Clear will-change when done
tl.to('.box', { /* animation */ })
  .call(() => gsap.set('.box', { clearProps: 'willChange' }));

// Batch DOM reads to prevent layout thrashing
const positions = gsap.utils.toArray('.item').map(el => {
  return { x: el.offsetLeft, y: el.offsetTop };
});

// Then animate with those values
positions.forEach((pos, i) => {
  gsap.from('.item')[i], { x: pos.x, y: pos.y });
});

// Use invalidateOnRefresh for responsive animations
ScrollTrigger.create({
  trigger: '.section',
  start: 'top top',
  end: () => `+=${document.querySelector('.section').offsetHeight}`,
  invalidateOnRefresh: true  // Recalculate on window resize
});

// Enable GSAP's debug tools
GSAPDebugger.create();

// Log timeline progress
tl.eventCallback('onUpdate', () => {
	console.log('Progress:', tl.progress());
});

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

// Check animation conflicts
gsap.globalTimeline.getChildren().forEach((tween) => {
	console.log('Target:', tween.targets(), 'Progress:', tween.progress());
});

// Button click feedback
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();

	// Exit animation
	tl.to('.old-content', {
		opacity: 0,
		y: -50,
		duration: 0.4,
		ease: 'power2.in',
	});

	// Enter animation
	tl.from(
		'.new-content',
		{
			opacity: 0,
			y: 50,
			duration: 0.6,
			ease: 'power2.out',
		},
		'-=0.2'
	);

	return tl;
}

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

	// Stagger in logo elements
	tl.from('.logo-path', {
		drawSVG: 0,
		duration: 1,
		stagger: 0.2,
		ease: 'power2.out',
	});

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

	// Scale out and hide
	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('explode')) {
		explodeAnimation();
	}
};

// Accessibility check
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
	gsap.globalTimeline.timeScale(100); // Instant animations
	// Or disable entirely:
	// gsap.config({ force3D: false, autoSleep: 60 });
}