---
title: 'Tweens'
excerpt: 'gsap.to, from, fromTo, set — the four core tween methods.'
icon: 'Play'
---

## The four methods

A **tween** is one animation: take targets from A to B over a duration with an ease. Almost everything else in GSAP (timelines, ScrollTrigger, Flip) builds on these four methods.

| Method | Use |
| --- | --- |
| `gsap.to()` | Animate **to** vars from current state (most common) |
| `gsap.from()` | Animate **from** vars to current state (entrances) |
| `gsap.fromTo()` | Explicit start and end |
| `gsap.set()` | Apply immediately (duration 0) |

Prefer `to` when you know the destination. Prefer `from` when the end state already lives in CSS. Use `fromTo` when neither end is trustworthy (loading handoffs, interrupted states). Use `set` to establish a known starting point before a sequence runs.

## Toast entrance (`from`)

`gsap.from()` is for **entrances**: you describe where the element starts (below, invisible), and GSAP animates to its natural CSS state. Prefer this over `to` when the stylesheet already holds the resting look.

Watch: the toast rises `24px` and fades in with `power2.out` so motion is visible immediately, then settles.

<ComponentPreview replay>
  <GsapToastEnter />

  <DocsFileTabs title="From entrance">

```tsx title="from-entrance.tsx"
gsap.from('.gsap-toast', { y: 24, autoAlpha: 0, duration: 0.35, ease: 'power2.out' });
```

```html title="from-entrance-markup.html"
<div>
  <div class="gsap-toast rounded-lg border bg-card px-4 py-3 shadow-md">
    Changes saved
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Skeleton → content (`fromTo`)

`fromTo` locks **both** ends. That matters when two elements trade places — skeleton out, content in — and you cannot rely on “whatever the DOM looks like right now.”

Watch the handoff: skeletons fade slightly before content rises in. Delays stagger the two tweens so the swap feels intentional, not a hard cut.

<ComponentPreview replay>
  <GsapSkeletonToContent />

  <DocsFileTabs title="Skeleton fromto">

```tsx title="skeleton-fromto.tsx"
gsap.fromTo(
  '.gsap-content',
  { autoAlpha: 0, y: 8 },
  { autoAlpha: 1, y: 0, duration: 0.35, ease: 'power2.out', delay: 0.4 }
);
gsap.to('.gsap-skeleton', { autoAlpha: 0, duration: 0.2, delay: 0.3 });
```

```html title="skeleton-fromto-markup.html"
<div>
  <div class="gsap-skeleton h-4 w-3/4 rounded bg-muted"></div>
  <div class="gsap-skeleton h-4 w-full rounded bg-muted"></div>
  <div class="gsap-skeleton h-4 w-5/6 rounded bg-muted"></div>
  <div class="gsap-content space-y-2 pt-2">
    <p>Dashboard loaded</p>
    <p>12 active users · 98% uptime</p>
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## `set` before a sequence

`gsap.set()` applies values with **zero duration** — a reliable initial state. Without it, a replay or remount can start from whatever the last tween left behind.

Here dots are forced to `scale: 0` / invisible, then a staggered `to` brings them in. `set` is the reset; `to` is the show.

<ComponentPreview replay>
  <GsapSetBeforeSequence />

  <DocsFileTabs title="Set before sequence">

```tsx title="set-before-sequence.tsx"
gsap.set('.gsap-dot', { scale: 0, autoAlpha: 0 });
gsap.to('.gsap-dot', { scale: 1, autoAlpha: 1, stagger: 0.08, duration: 0.25 });
```

```html title="set-before-sequence-markup.html"
<div class="flex gap-2">
  <span class="gsap-dot size-3 rounded-full bg-accent"></span>
  <span class="gsap-dot size-3 rounded-full bg-accent"></span>
  <span class="gsap-dot size-3 rounded-full bg-accent"></span>
  <span class="gsap-dot size-3 rounded-full bg-accent"></span>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Function-based values

Any tween property can be a **function** `(index, target, targets) => value`. Each target gets its own end value without writing a loop of separate tweens.

Watch the avatars: `x: (i) => i * 48` fans them out by index while `stagger` keeps the cascade readable.

<ComponentPreview replay>
  <GsapAvatarRow />

  <DocsFileTabs title="Function based x">

```tsx title="function-based-x.tsx"
gsap.to('.gsap-avatar', {
  x: (i) => i * 48,
  duration: 0.6,
  ease: 'power2.out',
  stagger: 0.06,
});
```

```html title="function-based-x-markup.html"
<div class="gsap-avatars flex gap-2">
  <div class="gsap-avatar size-10 rounded-full"></div>
  <div class="gsap-avatar size-10 rounded-full"></div>
  <div class="gsap-avatar size-10 rounded-full"></div>
  <div class="gsap-avatar size-10 rounded-full"></div>
  <div class="gsap-avatar size-10 rounded-full"></div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

<Callout variant="tip" title="immediateRender">
  When stacking multiple `from()` tweens on the same property, set `immediateRender: false` on later tweens so they do not overwrite each other before running.
</Callout>