Grid Transitions - HyperFrames

Install

That writes one file: compositions/transitions-grid.html.

Source

transitions-grid.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>Grid Transitions</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background: #000;
        overflow: hidden;
      }

      .scene {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .scene-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      #scene1 .scene-inner {
        background: #1b263b;
      }
      #scene2 .scene-inner {
        background: #e07a5f;
      }

      .scene-num {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 200px;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.08);
        line-height: 1;
      }
      .scene-label {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 48px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.25);
        letter-spacing: 12px;
        text-transform: uppercase;
        margin-top: 10px;
      }

      .info-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0.88);
        padding: 28px 60px;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .info-bar .info-name {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        color: #fff;
      }
      .info-bar .info-cat {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 18px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 4px;
        text-transform: uppercase;
      }

      /* Title / Outro */
      #title-card,
      #outro-card {
        position: absolute;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #0d1117;
        opacity: 0;
      }
      .card-title {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 72px;
        font-weight: 800;
        color: #fff;
      }
      .card-sub {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 16px;
        letter-spacing: 6px;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div
      id="main"
      data-composition-id="main"
      data-start="0"
      data-duration="11"
      data-width="1920"
      data-height="1080"
      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
    >
      <!-- Title Card -->
      <div id="title-card">
        <div class="card-title">Grid Transitions</div>
        <div class="card-sub">Grid Dissolve</div>
      </div>

      <!-- Scene A -->
      <div id="scene1" class="scene" style="opacity: 0">
        <div id="s1" class="scene-inner">
          <div class="scene-num">ONE</div>
          <div class="scene-label">Scene A</div>
        </div>
      </div>

      <!-- Scene B -->
      <div id="scene2" class="scene" style="opacity: 0">
        <div id="s2" class="scene-inner">
          <div class="scene-num">TWO</div>
          <div class="scene-label">Scene B</div>
        </div>
      </div>

      <!-- Grid container -->
      <div
        id="grid-container"
        style="
          position: absolute;
          inset: 0;
          z-index: 50;
          pointer-events: none;
          display: grid;
          grid-template-columns: repeat(4, 480px);
          grid-template-rows: repeat(3, 360px);
        "
      ></div>

      <!-- Info Bar -->
      <div id="info1" class="info-bar">
        <div class="info-name">Grid Dissolve</div>
        <div class="info-cat">Grid</div>
      </div>

      <!-- Outro Card -->
      <div id="outro-card">
        <div class="card-title">Grid Transitions</div>
        <div class="card-sub">End</div>
      </div>
    </div>

    <script>
      (function () {
        var tl = gsap.timeline({ defaults: { ease: "none" } });
        window.__timelines = window.__timelines || {};
        window.__timelines["main"] = tl;

        // Generate grid cells
        var gridColors = [
          "#F72585",
          "#7209B7",
          "#3A0CA3",
          "#4361EE",
          "#4CC9F0",
          "#F72585",
          "#7209B7",
          "#3A0CA3",
          "#4361EE",
          "#4CC9F0",
          "#F72585",
          "#7209B7",
        ];
        var gridHTML = "";
        for (var g = 0; g < 12; g++) {
          gridHTML +=
            '<div id="cell-' +
            g +
            '" style="background:' +
            gridColors[g % gridColors.length] +
            '; opacity:0;"></div>';
        }
        document.getElementById("grid-container").innerHTML = gridHTML;

        function resetScenes() {
          tl.set("#scene1", { opacity: 1 });
          tl.set("#scene2", { opacity: 0 });
          tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
          tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
          for (var g = 0; g < 12; g++) {
            tl.set("#cell-" + g, { opacity: 0 });
          }
        }

        // ===== TITLE CARD (0–3s) =====
        tl.set("#title-card", { opacity: 1 }, 0);
        tl.fromTo(
          ".card-title",
          { y: 30, opacity: 0 },
          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
          0.4,
        );
        tl.fromTo(
          ".card-sub",
          { y: 20, opacity: 0 },
          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
          0.8,
        );
        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);

        // ===== DEMO 1: Grid Dissolve (3–8s) =====
        var T;

        tl.call(function () {}, [], 3);
        resetScenes();

        // Show info bar
        tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);

        // Hold 1.5s, transition at T=4.5
        T = 4.5;

        // Cell positions (col, row) and distance from center (1.5, 1)
        var cells = [];
        for (var g = 0; g < 12; g++) {
          var col = g % 4;
          var row = Math.floor(g / 4);
          var dist = Math.sqrt(Math.pow(col - 1.5, 2) + Math.pow(row - 1, 2));
          cells.push({ id: g, dist: dist });
        }
        cells.sort(function (a, b) {
          return a.dist - b.dist;
        });

        // Ripple in from center
        var stag = 0.04;
        for (var c = 0; c < cells.length; c++) {
          tl.to(
            "#cell-" + cells[c].id,
            { opacity: 1, duration: 0.15, ease: "power2.out" },
            T + c * stag,
          );
        }

        // Swap scenes at midpoint
        tl.set("#scene1", { opacity: 0 }, T + 0.35);
        tl.set("#scene2", { opacity: 1 }, T + 0.35);

        // Ripple out
        for (var c = 0; c < cells.length; c++) {
          tl.to(
            "#cell-" + cells[c].id,
            { opacity: 0, duration: 0.15, ease: "power2.in" },
            T + 0.5 + c * stag,
          );
        }

        // Hold 1.0s, hide info, gap 0.5s
        tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);

        // ===== OUTRO (8–11s) =====
        tl.set("#scene1", { opacity: 0 }, 8);
        tl.set("#scene2", { opacity: 0 }, 8);
        tl.set("#outro-card", { opacity: 1 }, 8);
        tl.fromTo(
          "#outro-card .card-title",
          { y: 30, opacity: 0 },
          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
          8.3,
        );
        tl.fromTo(
          "#outro-card .card-sub",
          { y: 20, opacity: 0 },
          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
          8.7,
        );
        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 10.5);
      })();
    </script>
  </body>
</html>

Usage

After installing, add the block to your host composition:

<div data-composition-id="transitions-grid" data-composition-src="compositions/transitions-grid.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>

Tagged transition showcase.

⌘I