<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
      <defs>
        <symbol id="title">
          <text
            x="530.745"
            y="248.517"
            font-family="Fontdinerdotcom"
            font-size="80"
          >
            The
          </text>
          <text
            x="619.488"
            y="442.004"
            font-family="Fontdinerdotcom"
            font-size="80"
          >
            Mrs.
          </text>
          <text
            x="400.183"
            y="352.084"
            font-family="Fontdinerdotcom"
            font-size="140"
          >
            Marvelous
          </text>
          <text
            x="674.057"
            y="311.245"
            font-family="Fontdinerdotcom Sparkly"
            font-size="120"
          >
            *
          </text>
          <text
            x="465.468"
            y="548.199"
            font-family="Fontdinerdotcom"
            font-size="190"
          >
            Maisel
          </text>
          <text
            x="409.372"
            y="542.419"
            font-family="Fontdinerdotcom Sparkly"
            font-size="120"
          >
            *
          </text>
        </symbol>
        <clipPath id="titleClipPath">
          <rect
            id="titleClipPathRect"
            x="810"
            y="150"
            width="404"
            height="500"
            fill="white"
          />
        </clipPath>
      </defs>
      <rect id="bg1" x="0" y="0" width="1200" height="800" fill="#100D18" />
      <rect
        id="bg2"
        class="bg"
        x="1200"
        y="0"
        width="1200"
        height="800"
        fill="#4EA5D5"
      />
      <rect
        id="bg3"
        class="bg"
        x="1200"
        y="0"
        width="1200"
        height="800"
        fill="#C08250"
      />
      <rect
        id="bg4"
        class="bg"
        x="1200"
        y="0"
        width="1200"
        height="800"
        fill="#BBC052"
      />
      <rect
        id="bg5"
        class="bg"
        x="1200"
        y="0"
        width="1200"
        height="800"
        fill="#CC81B9"
      />
      <rect
        id="bg6"
        class="bg"
        x="1200"
        y="0"
        width="1200"
        height="800"
        fill="#CD0000"
      />
      <use id="title1" href="#title" x="0" y="0" fill="#C74B50" />
      <use
        id="title2"
        class="title"
        href="#title"
        x="0"
        y="0"
        fill="#CAD15A"
        style="clip-path: url(#titleMask)"
      />
      <use
        id="title3"
        class="title"
        href="#title"
        x="0"
        y="0"
        fill="#D3311F"
        opacity="0"
      />
      <use
        id="title4"
        class="title"
        href="#title"
        x="0"
        y="0"
        fill="#70ABBF"
        opacity="0"
      />
      <use
        id="title5"
        class="title"
        href="#title"
        x="0"
        y="0"
        fill="#172324"
        opacity="0"
      />
      <use
        id="title6"
        class="title"
        href="#title"
        x="0"
        y="0"
        fill="#C8D46D"
        opacity="0"
      />
    </svg>

@font-face {
  font-family: "Fontdinerdotcom";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/the-marvelous-mrs-maisel/fonts/Fontdinerdotcom.woff")
    format("woff");
}

@font-face {
  font-family: "Fontdinerdotcom Sparkly";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/the-marvelous-mrs-maisel/fonts/FontdinerdotcomSparkly.woff")
    format("woff");
}

text {
  stroke: none;
}

svg {
  width: 100%;
}

let curtainSwipe = gsap.timeline();

curtainSwipe.to(".bg", {
  duration: 0.4,
  x: -1200,
  ease: "power1.out",
  stagger: 0.3
});

let textReveal = gsap.timeline();
let xValue = 415;
let textRevealDuration = 0.2;

textReveal
  .to("#titleClipPathRect", {
    duration: textRevealDuration,
    x: xValue * -1
  })
  .set("#title2", { "clip-path": null })
  .set("#titleClipPathRect", {
    x: xValue
  })
  .set("#title3", { opacity: 1, "clip-path": "url(#titleClipPath)" })
  .to("#titleClipPathRect", {
    duration: textRevealDuration,
    x: xValue * -1
  })
  .set("#title3", { "clip-path": null })
  .set("#titleClipPathRect", {
    x: xValue
  })
  .set("#title4", { opacity: 1, "clip-path": "url(#titleClipPath)" })
  .to("#titleClipPathRect", {
    duration: textRevealDuration,
    x: xValue * -1
  })
  .set("#title4", { "clip-path": null })
  .set("#titleClipPathRect", {
    x: xValue
  })
  .set("#title5", { opacity: 1, "clip-path": "url(#titleClipPath)" })
  .to("#titleClipPathRect", {
    duration: textRevealDuration,
    x: xValue * -1
  })
  .set("#title5", { "clip-path": null })
  .set("#titleClipPathRect", {
    x: xValue
  })
  .set("#title6", { opacity: 1, "clip-path": "url(#titleClipPath)" })
  .to("#titleClipPathRect", {
    duration: textRevealDuration,
    x: xValue * -1
  });

// click svg to replay animation
let svg = document.getElementsByTagName("svg")[0];
svg.addEventListener("click", replay);

function replay() {
  curtainSwipe.restart();
  textReveal.restart();
}