HTMLDrop.

GSAP starter

GSAP animations: tweens, staggers, and a controllable timeline.

Open in editor Free. No install, no sign-up.
  • gsap

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>GSAP starter</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  </head>
  <body>
    <main class="stage">
      <a href="https://gsap.com" target="_blank" class="brand">GSAP</a>
      <div class="boxes">
        <div class="box green"></div>
        <div class="box pink"></div>
        <div class="box purple"></div>
        <div class="box blue"></div>
      </div>
      <div class="controls">
        <button data-action="play">Play</button>
        <button data-action="pause">Pause</button>
        <button data-action="reverse">Reverse</button>
        <button data-action="restart">Restart</button>
      </div>
    </main>
  </body>
</html>

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0e100f;
  color: #fffce1;
  font-family: system-ui, sans-serif;
}
.stage {
  display: grid;
  justify-items: center;
  gap: 40px;
}
.brand {
  color: #0ae448;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.boxes {
  display: flex;
  gap: 20px;
}
.box {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}
.green {
  background: #0ae448;
}
.pink {
  background: #fec5fb;
}
.purple {
  background: #9d95ff;
}
.blue {
  background: #00bae2;
}
.controls {
  display: flex;
  gap: 8px;
}
button {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid #fffce133;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
button:hover {
  border-color: #0ae448;
  color: #0ae448;
}

// A timeline sequences tweens; its controls drive the whole animation.
const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5, yoyo: true });

tl.from(".box", { y: -120, opacity: 0, duration: 0.8, ease: "bounce.out", stagger: 0.12 })
  .to(".box", {
    rotation: 360,
    borderRadius: "50%",
    duration: 1,
    ease: "power2.inOut",
    stagger: 0.1,
  })
  .to(".box", { x: (i) => (i - 1.5) * 12, scale: 0.8, duration: 0.6, ease: "back.out(2)" });

document.querySelector(".controls").addEventListener("click", (event) => {
  const action = event.target.dataset.action;
  if (action) tl[action]();
});

Questions

Can I use GSAP without a build step?

Yes. This starter loads GSAP straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a GSAP project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my GSAP demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits