HTMLDrop.

Anime.js starter

Anime.js v4: staggered, looping animations in a few lines.

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

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Anime.js starter</title>
  </head>
  <body>
    <main class="stage">
      <a href="https://animejs.com" target="_blank" class="wordmark">anime.js</a>
      <div class="grid"></div>
      <p>Click the grid to replay from where you click.</p>
    </main>
  </body>
</html>

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #252423;
  color: #f6f4f2;
  font-family: system-ui, sans-serif;
}
.stage {
  display: grid;
  justify-items: center;
  gap: 32px;
}
.wordmark {
  color: #ff4b4b;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.grid {
  display: grid;
  grid-template-columns: repeat(11, 20px);
  gap: 10px;
  cursor: pointer;
}
.dot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #ff4b4b;
}
p {
  margin: 0;
  color: #a8a29e;
  font-size: 14px;
}

import { animate, stagger } from "https://esm.sh/animejs@4";

// Build an 11 × 11 grid, then ripple it out from a point.
const grid = document.querySelector(".grid");
const size = [11, 11];
for (let i = 0; i < size[0] * size[1]; i++) {
  grid.append(Object.assign(document.createElement("div"), { className: "dot" }));
}

function ripple(from = "center") {
  animate(".dot", {
    scale: [{ to: [1, 0.2] }, { to: 1 }],
    rotate: [{ to: 90 }, { to: 0 }],
    backgroundColor: [{ to: "#ffb3b3" }, { to: "#ff4b4b" }],
    delay: stagger(60, { grid: size, from }),
    ease: "inOutQuad",
  });
}

ripple();
grid.addEventListener("click", (event) => {
  const index = [...grid.children].indexOf(event.target);
  if (index >= 0) ripple(index);
});

Questions

Can I use Anime.js without a build step?

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

How do I start a Anime.js 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 Anime.js 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