What's the difference between gsap.to and gsap.from?

Direction. gsap.to animates from the element's current state to the values you pass. gsap.from does the reverse: the values you pass become the start, and GSAP animates back to the current state. Use to for feedback and spring-back, from for entrance reveals where the resting layout is the end you want.

When should I use gsap.fromTo instead of gsap.from?

Use fromTo when the element's current DOM state is not a reliable end value. That happens with scroll-scrubbed tweens and anything that replays, where the live state may already have been changed by a previous run. fromTo spells out both ends so nothing is inferred from the DOM.

Why does my gsap.from animation flash or jump before it starts?

gsap.from renders its start values immediately on creation (immediateRender: true by default). If you create it at trigger time or after a re-render, the snap to the start state can fight the live layout and read as a flash. Pre-build a paused timeline and restart it on trigger instead of creating a fresh delayed from tween.

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

Functionally they both apply values instantly, but gsap.set reads as intent: it says 'put this here, no animation'. gsap.set is also lighter since it skips the tween machinery. Use gsap.set to lock a start state before a reveal.

Can I stack two gsap.from tweens on the same element?

Be careful. Both render their start values immediately, so the second from reads the first one's start as the current state and you get the wrong end. Pass immediateRender: false on the later tweens, or use fromTo with explicit start and end values so nothing depends on render order.

Core

gsap.to / gsap.from / gsap.fromTo

gsap.to, gsap.from, and gsap.fromTo are GSAP's three ways to create a tween, and they differ only in which end of the animation you describe. `gsap.to` animates from the element's current state to the values you pass, `gsap.from` animates from the values you pass to the current state, and `gsap.fromTo` takes both an explicit start and end so nothing is inferred.

Updated June 30, 2026

Mechanics

How the three methods differ

All three return a tween and take the same vars object (duration, ease, stagger, the properties to animate). The only difference is where the start and end values come from.

gsap.to

The element keeps whatever state it already has, and GSAP animates it TO the values in the vars object. This is the one you reach for most. The card below is at opacity: 0 in CSS, and the tween brings it to 1.

script.js

gsap.from

The direction is flipped. You describe the START state in vars, and GSAP animates FROM there back to wherever the element already is. It's shorthand for reveal animations where the resting state is the real layout and you only need to say where it comes in from.

script.js

gsap.from applies its start values immediately on creation (immediateRender: true by default), so the element snaps to opacity: 0, y: 40 the instant the tween is built, then animates in.

gsap.fromTo

You spell out both ends. The first vars object is the start, the second is the end. Use it when the element's CSS state is not a reliable start or end, which is most common with scroll-scrubbed and replayable animations where you cannot trust the current state to be the resting one.

script.js

gsap.set is the fourth one

gsap.set(target, vars) is a zero-duration gsap.to. It applies the values instantly with no animation, which is how you lock an element's start state before a separate tween runs.

When

Which one to reach for

gsap.to for hover and click feedback, spring-back, and any case where the element already sits at its start (button scale on hover, a cursor-following pull)
gsap.from for one-shot entrance reveals where the resting layout is the real end state and you only need to name where it enters from
gsap.fromTo for scroll-scrubbed tweens and anything that replays, where the current DOM state cannot be trusted as either end
gsap.set to instantly position elements before a reveal, with no animation

Alternatives

The immediateRender trap

gsap.from and gsap.fromTo both render their start values immediately on creation, while gsap.to does not. That default is what causes the two most common bugs with these methods.

A gsap.from created at trigger time (inside a ScrollTrigger callback or after a re-render) can flash or freeze at its start values, because the immediate render fights the live DOM state. Pre-building a paused timeline and restarting it is the reliable fix
Two from tweens on the same property stack their start values, so the second one reads the first one's start as the current state. Pass immediateRender: false on all but the first, or switch to fromTo with explicit ends
If you only need to set a value once with no tween, use gsap.set, not a to with duration: 0 scattered through your code

In production

Used in these Annnimate components

Only about 18.4% of mobile pages load any JS animation library at all (HTTP Archive Web Almanac, 2024), so the developers who do reach for GSAP are usually the ones building real motion. These three methods are the foundation every Annnimate component sits on:

Text Reveal uses gsap.set to push the lines below a mask at yPercent, then a single gsap.to to slide them back to 0 with a stagger
Element Reveal uses gsap.fromTo so the start and end states are explicit, which is what makes it safe to scrub on scroll and replay
Magnetic Button uses gsap.to for both the pull toward the cursor and the spring-back when the cursor leaves, since the button always animates from its current position

Used in components

See it running in production

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

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

Magnetic ButtonThe button and its text gently pull toward your cursor and drift with it, so it feels like it's reaching for you.

FAQ

Common questions

What's the difference between gsap.to and gsap.from?: Direction. gsap.to animates from the element's current state to the values you pass. gsap.from does the reverse: the values you pass become the start, and GSAP animates back to the current state. Use to for feedback and spring-back, from for entrance reveals where the resting layout is the end you want.
When should I use gsap.fromTo instead of gsap.from?: Use fromTo when the element's current DOM state is not a reliable end value. That happens with scroll-scrubbed tweens and anything that replays, where the live state may already have been changed by a previous run. fromTo spells out both ends so nothing is inferred from the DOM.
Why does my gsap.from animation flash or jump before it starts?: gsap.from renders its start values immediately on creation (immediateRender: true by default). If you create it at trigger time or after a re-render, the snap to the start state can fight the live layout and read as a flash. Pre-build a paused timeline and restart it on trigger instead of creating a fresh delayed from tween.
What's the difference between gsap.set and gsap.to with duration 0?: Functionally they both apply values instantly, but gsap.set reads as intent: it says 'put this here, no animation'. gsap.set is also lighter since it skips the tween machinery. Use gsap.set to lock a start state before a reveal.
Can I stack two gsap.from tweens on the same element?: Be careful. Both render their start values immediately, so the second from reads the first one's start as the current state and you get the wrong end. Pass immediateRender: false on the later tweens, or use fromTo with explicit start and end values so nothing depends on render order.

Previousgsap.tickergsap.ticker is GSAP's central requestAnimationFrame loop, the single heartbeat that drives every tween, timeline, and ScrollTrigger update on the page.Nextgsap.utilsgsap.utils is a set of helper functions built into GSAP core for the math that drives animation: clamp, mapRange, random, snap, interpolate, wrap, and toArray, among others.