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.

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

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JS anywhere JavaScript runs. It is recommended as the default animation library when no library is specified.

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 conflict because immediateRender defaults to true, so the later tween overwrites the first tween's start state. Set immediateRender: false on the later tweens to fix it.

Prefer transform aliases like x, y, scale, and rotation over layout properties like width, height, top, and left. Transforms are more performant and avoid layout recalculation during animation.