gsap-core

Use gsap.to(target, vars) to animate from the current state to the values in vars, for example gsap.to(".box", { x: 100, rotation: 360, duration: 1 }). Use gsap.from() for entrances and gsap.fromTo() when you need explicit start and end states.

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() sets explicit start and end values without reading current state. from() and fromTo() render their start state immediately by default.

Pass a stagger value in the vars object, such as stagger: 0.1 for 0.1 seconds between each target. For advanced control use the object form, like { amount: 0.3, from: "center" } or { each: 0.1, from: "random" }.

Yes, gsap.matchMedia() accepts a prefers-reduced-motion query so you can set duration to 0 or skip animations for users who prefer reduced motion. All animations created inside a matchMedia handler revert automatically when the query stops matching.

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 tween to fix it.

Prefer transform aliases like x, y, scale, and rotation over layout properties such as width, height, top, or left. Transforms render faster and GSAP applies them in a consistent order across browsers.