Gsap

Note: Some advanced plugins (SplitText, MorphSVG, DrawSVG) require a GreenSock membership. Stick to freely available plugins unless the user confirms they have access.

Basic Animation Methods

gsap.to() - Animate TO values

// Animate elements TO these values
gsap.to(".box", {
  x: 100,              // Move right 100px
  y: 50,               // Move down 50px
  rotation: 360,       // Rotate full circle
  opacity: 0.5,        // Fade to 50%
  duration: 1,         // 1 second
  ease: "power2.out"   // Easing function
});

gsap.from() - Animate FROM values

// Animate FROM these values to current state
gsap.from(".box", {
  opacity: 0,
  y: -50,
  duration: 1,
  ease: "back.out(1.7)"
});

gsap.fromTo() - Explicit start and end

// Define both starting and ending values
gsap.fromTo(".box", 
  { x: -100, opacity: 0 },  // From
  { x: 0, opacity: 1, duration: 1 }  // To
);

gsap.set() - Instant property setting

// Set properties immediately (no animation)
gsap.set(".box", { x: 100, opacity: 0 });

Critical Properties & Best Practices

Transform Properties (GPU-Accelerated)

{
  x: 100,              // translateX (pixels or relative)
  y: 100,              // translateY
  xPercent: 50,        // translateX in %
  yPercent: 50,        // translateY in %
  rotation: 360,       // rotate (degrees)
  rotationX: 180,      // rotateX (3D)
  rotationY: 180,      // rotateY (3D)
  scale: 1.5,          // scale uniformly
  scaleX: 2,           // scale width only
  scaleY: 0.5,         // scale height only
  skewX: 10,           // skew horizontally
  skewY: 10,           // skew vertically
  transformOrigin: "center center"  // rotation/scale origin
}

Other Animatable Properties

{
  opacity: 0.5,        // transparency
  backgroundColor: "#ff0000",  // colors
  color: "#ffffff",
  width: "500px",      // CSS properties (use strings for units)
  height: "300px",
  borderRadius: "50%",
  filter: "blur(10px)",
  clipPath: "circle(50%)"
}

Essential Animation Parameters

{
  duration: 1,         // Animation duration in seconds (default: 0.5)
  delay: 0.5,          // Delay before starting (default: 0)
  ease: "power2.out",  // Easing function (default: "power1.out")
  stagger: 0.1,        // Delay between animating multiple elements
  repeat: 2,           // Number of times to repeat (-1 for infinite)
  repeatDelay: 1,      // Delay between repeats
  yoyo: true,          // Reverse on alternate repeats
  paused: false,       // Start paused?
  immediateRender: false,  // Render immediately for .from()?
  overwrite: "auto"    // How to handle conflicting animations
}

Easing Functions

GSAP includes powerful easing options. Choose based on the desired feel:

// Power eases (most common)
"power1.out"    // Subtle deceleration
"power2.out"    // Moderate deceleration (default feel)
"power3.out"    // Strong deceleration
"power4.out"    // Very strong deceleration

// Specialized eases
"back.out(1.7)" // Overshoots then settles (playful)
"elastic.out"   // Bouncy, spring-like
"bounce.out"    // Bounces at the end
"circ.out"      // Circular motion feel
"expo.out"      // Exponential deceleration (dramatic)

// Ease directions
".out"          // Fast start, slow end (most common)
".in"           // Slow start, fast end
".inOut"        // Slow start and end, fast middle

// Linear
"none"          // No easing, constant speed

// Examples of usage