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() for 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-based animation, or dynamic values computed in JavaScript.

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript. It animates DOM and SVG elements through its included CSSPlugin in any environment where JavaScript runs.

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.

Multiple from() or fromTo() tweens on the same property of the same target conflict because immediateRender defaults to true. Set immediateRender: false on the later tweens so the first tween's end state is not overwritten before it runs.

Prefer transform aliases like x, y, scale, and rotation over layout-heavy properties such as width, height, top, and left. Transforms render more performantly and apply in a consistent order across browsers.