| name | gsap |
| description | GSAP — high-performance animation library for the web with timelines, tweens, ScrollTrigger, and utility plugins. |
tweens
gsap.to(el, { x: 100, duration: 1 }) — animate FROM current state TO target. gsap.from() — animate FROM a state TO current. gsap.fromTo() — explicit start/end. All return a Tween instance.
timeline
gsap.timeline({ defaults: { duration: 0.5 } }). Chain .to(), .from(), .fromTo(). Position parameter: "+=0.2" (after), "-=0.1" (overlap), "<" (at start), ">" (at end).
easing
Built-in: "power2.out", "back.inOut", "elastic.out(1, 0.5)", "bounce.out". Custom: "M0,0 C0.25,0.1 0.25,1 1,1" (cubic bezier). SlowMo, SteppedEase via utils.
ScrollTrigger
scrollTrigger: { trigger: ".el", start: "top center", end: "bottom top", scrub: true }. Pin elements, toggle classes, snap to sections. ScrollTrigger.create() for manual control. matchMedia() for responsive.
MotionPath
Plugin: gsap.to(el, { motionPath: { path: "#path", align: true, autoRotate: true } }). Animate along SVG path or array of points. Control offset, align, rotation.
staggers
gsap.to(".box", { y: 50, stagger: 0.1 }). Options: each, from ("start"/"end"/"center"), grid (auto, auto), amount (total). Eased staggers with ease: "power1.inOut".
Draggable
Draggable.create(".el", { type: "x,y", bounds: ".container" }). Inertia snapping, liveSnap, onDrag callbacks. Combine with ThrowProps for momentum.
performance
Use will-change: transform on animated elements. Animate transform/opacity only. Cache selector results. Use gsap.quickTo() for mouse-driven perf. gsap.ticker.lagSmoothing().
