gsap-core

Use gsap.to(targets, vars) to animate from the current state to the values in vars, such as gsap.to('.box', { x: 100, duration: 1 }). Use gsap.from() for entrances and gsap.fromTo() when you need explicit start and end states.

CSS animations work for simple transitions, but GSAP is preferred when you need timeline sequencing, runtime control like pause and reverse, complex easing, scroll-driven animation, or values computed dynamically in JavaScript.

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript. It animates DOM and SVG elements through selector strings, element references, arrays, or NodeLists.

Pass a stagger value in the vars object, such as stagger: 0.1 for a fixed delay between items, or an object like { amount: 0.3, from: 'center' } to distribute timing across all targets with control over the starting position.

Multiple from() or fromTo() tweens on the same property conflict because immediateRender defaults to true, so the later tween overwrites the first tween's end state. Set immediateRender: false on the later tweens to fix it.

Use gsap.matchMedia() with a reduceMotion condition like '(prefers-reduced-motion: reduce)' and set duration to 0 or skip the animation when it matches. Animations created inside matchMedia revert automatically when the query stops matching.