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 vars values, gsap.from() animates from the vars values to the current state, and gsap.fromTo() takes explicit start and end objects. from() and fromTo() render their start state immediately by default via immediateRender.

Pass a stagger value in the vars object, either as a number of seconds like stagger: 0.1 or as an object such as { each: 0.1, from: "center" }. The from option accepts start, center, end, edges, random, or an index.

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 matching handler 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 GSAP when you need timeline sequencing, runtime control like pause, reverse, or seek, complex easing, scroll-driven animation, or dynamically calculated values. CSS animations are sufficient only for simple transitions.