Controlling a tween in GSAP

Control methods let you start, stop, reverse or speed up an animation in response to clicks or other events. You keep the tween in a variable and call methods on it.

All GSAP examples GSAP: usage and stats

Controlling a tween in GSAP: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Create a paused tween. The tween is created with paused: true and saved in a variable, so it does not play until a button tells it to. It moves the box across and spins it with ease: "none". [1]
Wire buttons to control methods. Each button calls one method on the stored tween: play(), pause(), resume(), reverse() or restart(). resume() keeps whatever direction the tween had. [1]
Change the speed with timeScale. The 0.5x and 2x buttons call timeScale() to play the tween at half or double speed. The durations in the tween stay the same. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import gsap from "gsap";

const root = document.getElementById("root");
root.style.cssText =
  "background:#0e100f;color:#fffce1;font:14px sans-serif;padding:30px;box-sizing:border-box;height:100%";

const track = document.createElement("div");
track.style.cssText = "height:160px;display:flex;align-items:center";
const box = document.createElement("div");
box.style.cssText = "width:70px;height:70px;border-radius:14px;background:#0ae448";
track.append(box);

const nav = document.createElement("div");
nav.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;margin-top:30px";
root.append(track, nav);

// stored in a variable so the buttons can control it
const tween = gsap.to(box, {
  duration: 2,
  x: 460,
  rotation: 360,
  ease: "none",
  paused: true,
});

const actions = {
  "play()": () => tween.play(),
  "pause()": () => tween.pause(),
  "resume()": () => tween.resume(),
  "reverse()": () => tween.reverse(),
  "restart()": () => tween.restart(),
  "timeScale(0.5)": () => tween.timeScale(0.5),
  "timeScale(2)": () => tween.timeScale(2),
};

for (const [label, fn] of Object.entries(actions)) {
  const btn = document.createElement("button");
  btn.textContent = label;
  btn.style.cssText = "padding:8px 16px;border-radius:99px;border:1px solid #555;background:none;color:inherit;font-family:monospace;cursor:pointer";
  btn.onclick = fn;
  nav.append(btn);
}

Ctrl/⌘ + Enter runs

Press play, then try reverse and the speed buttons while the box is moving. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with gsap 3.15.0. Needs WebGL.

More GSAP examples

Grid stagger in GSAP Easing in GSAP Staggered animations in GSAP Sequencing with a GSAP timeline

Sources

Docs: Control and Callbacks

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with GSAP? Ask AgentGid →