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 }). Targets can be a CSS selector, element, or array, and vars use camelCase property names.

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.

GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript anywhere JavaScript runs. It also powers Webflow Interactions, so GSAP patterns apply when debugging Webflow animations.

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 end state. Set immediateRender: false on the later tweens to fix it.

Prefer autoAlpha over opacity for fades. When autoAlpha reaches 0, GSAP also sets visibility: hidden so the element stops blocking pointer events, and restores visibility when it becomes non-zero.