gsap-core

Use gsap.to(target, 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 values.

gsap.to animates from the current state to the given values, gsap.from animates from the given values to the current state, and gsap.fromTo defines both start and end explicitly. from() and fromTo() render their start state immediately by default.

Prefer GSAP when you need timeline sequencing, runtime control like pause, reverse, or seek, complex easing, scroll-based animation, or values computed dynamically in JavaScript. CSS animations are sufficient for simple transitions.

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

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.