What's the difference between gsap.set() and gsap.to() with duration 0?

They do the same thing. `gsap.set(el, vars)` is a readable shorthand for `gsap.to(el, { duration: 0, ...vars })`, both write the values immediately with no interpolation. Use `set` when the intent is 'apply this state now', it reads clearer than a tween with a zero duration buried in the vars.

Why isn't my gsap.set animating?

It's not supposed to. `gsap.set` applies properties instantly, there's no `duration` and no easing involved. If you want the element to move over time, use `gsap.to` or `gsap.fromTo`. A common mix-up is passing `duration` to `set`, where it's ignored.

How do I reset an element to its CSS styles after a GSAP animation?

Pass `clearProps` to a set: `gsap.set(el, { clearProps: "all" })`. That removes the inline styles GSAP added so your stylesheet takes over again. Note that clearing any transform property (`x`, `scale`, `rotation`) clears the entire transform, not just the one you named.

Should I set the initial state with gsap.set or in CSS?

If the value never changes at runtime, keep it in CSS. If GSAP is going to animate that same property, set it with `gsap.set` (or use a `from` tween), so the start value lives in the same transform cache GSAP animates through. That avoids the flash where the element renders in its CSS position for a frame before the start state applies.

Can I use gsap.set inside a timeline?

Yes, use `tl.set(target, vars, position)`. It adds an instant state change at that point in the sequence, which is the clean way to flip visibility, reset a `clipPath`, or re-park an element between steps without dropping a zero-duration tween into the middle of your timeline.

Core

gsap.set()

gsap.set() is the GSAP method that applies properties to elements instantly, with no animation. It's a zero-duration tween, so it writes the values immediately instead of interpolating, which makes it the standard way to lock in an element's starting state before a timeline runs and to reset properties after one finishes.

Updated June 30, 2026

Mechanics

How gsap.set works

gsap.set(targets, vars) takes the same vars object a tween takes, minus the timing keys. It's shorthand for gsap.to(targets, { duration: 0, ... }), so the values are written right away with no interpolation. Because it runs through the GSAP engine, it uses the same camelCase property names and transform aliases (x, y, scale, autoAlpha) you'd later animate, so the start values and the animated values stay in one consistent transform cache.

script.js

Inside a timeline you use tl.set(target, vars, position) for the same effect at a specific point in the sequence, for example flipping autoAlpha or resetting a clipPath between steps. It reads as an instant keyframe in the sequence rather than a tween with duration 0 floating around.

When

Use gsap.set for

Parking an element in its hidden start state before a reveal (autoAlpha: 0, y: 40) so it never flashes in its final layout on load
Resetting properties to a known state before replaying a timeline or rebuilding it on resize
Setting transformOrigin, willChange, or force3D once, before the tween that depends on them runs
Applying the end state directly under prefers-reduced-motion, skipping the in-between tween

Alternatives

Use something else when

The value should change over time, use gsap.to or gsap.fromTo for the actual motion
The element should start at a value and animate to its natural state, gsap.from sets the start and tweens to current in one call
The style never changes at runtime, put it in CSS instead of writing inline styles via gsap.set
You need to wipe GSAP's inline styles so a class can take over, that's clearProps, passed to a gsap.set rather than a separate concept

In production

Used in these Annnimate components

Every reveal component in the library parks its elements with gsap.set (or the from state of a fromTo) before the timeline plays, so nothing sits in its final position for a frame on load and then jumps.

Element Reveal sets each item to its hidden offset and autoAlpha: 0 before the staggered reveal runs
Text Reveal sets the split lines below their mask, then animates them up into view
Mask Reveal uses gsap.set to lock the clipPath at its closed state before the open tween animates the same variable

Reduced motion is just a set

When a user has prefers-reduced-motion: reduce, the right move is usually gsap.set to the end state instead of the tween. It matters: prefers-reduced-motion adoption jumped from 34% of sites in 2022 to over 50% of mobile sites in 2024 (HTTP Archive Web Almanac 2024), the most-adopted user-preference query on the web, so this path runs for a real slice of your traffic.

Used in components

See it running in production

Element RevealSix ways to bring elements in as you scroll: fade, slide up, scale, clip, blur or rotate.

Text RevealText comes in word by word or letter by letter as you scroll.

Mask RevealContent opens up or closes down through a shape as you scroll, a circle, oval, rectangle, blob or your own shape.

FAQ

Common questions

What's the difference between gsap.set() and gsap.to() with duration 0?: They do the same thing. gsap.set(el, vars) is a readable shorthand for gsap.to(el, { duration: 0, ...vars }), both write the values immediately with no interpolation. Use set when the intent is 'apply this state now', it reads clearer than a tween with a zero duration buried in the vars.
Why isn't my gsap.set animating?: It's not supposed to. gsap.set applies properties instantly, there's no duration and no easing involved. If you want the element to move over time, use gsap.to or gsap.fromTo. A common mix-up is passing duration to set, where it's ignored.
How do I reset an element to its CSS styles after a GSAP animation?: Pass clearProps to a set: gsap.set(el, { clearProps: "all" }). That removes the inline styles GSAP added so your stylesheet takes over again. Note that clearing any transform property (x, scale, rotation) clears the entire transform, not just the one you named.
Should I set the initial state with gsap.set or in CSS?: If the value never changes at runtime, keep it in CSS. If GSAP is going to animate that same property, set it with gsap.set (or use a from tween), so the start value lives in the same transform cache GSAP animates through. That avoids the flash where the element renders in its CSS position for a frame before the start state applies.
Can I use gsap.set inside a timeline?: Yes, use tl.set(target, vars, position). It adds an instant state change at that point in the sequence, which is the clean way to flip visibility, reset a clipPath, or re-park an element between steps without dropping a zero-duration tween into the middle of your timeline.

Previousgsap.registerEffect()gsap.registerEffect is a GSAP core method that packages an animation into a named, reusable recipe you call as gsap.effects.name(targets, config).Nextgsap.tickergsap.ticker is GSAP's central requestAnimationFrame loop, the single heartbeat that drives every tween, timeline, and ScrollTrigger update on the page.