Building Async Page Transitions in Vanilla JavaScript

class Header extends HTMLElement {
  constructor() {
    super();
    this._rendered = false;
  }

  connectedCallback() {
    if (!this._rendered) {
      this.render();
      this._rendered = true;
    }
  }

  disconnectedCallback() {
    this._rendered = false;
  }

  render() {
    this.innerHTML = /*html*/ `
      <nav class="nav">
      <div class="overflow"> 
        <link-c href="/">Home</link-c>
         </div>
         <div class="overflow">
        <link-c href="/alternative-page">Alternative page</link-c>
        </div>
      </nav>
    `;
  }
}

customElements.define("header-c", Header);

import "./header-c";
import "./link-c";

import { gsap } from "../lib";

class Link extends HTMLElement {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.handleHoverIn = this.handleHoverIn.bind(this);
    this.handleHoverOut = this.handleHoverOut.bind(this);
  }

  connectedCallback() {
    this.render();
    if (this.link) {
      this.link.addEventListener("click", this.handleClick);
      this.link.addEventListener("mouseenter", this.handleHoverIn);
      this.link.addEventListener("mouseleave", this.handleHoverOut);
    }
  }

  disconnectedCallback() {
    if (this.link) {
      this.link.removeEventListener("click", this.handleClick);
      this.link.removeEventListener("mouseenter", this.handleHoverIn);
      this.link.removeEventListener("mouseleave", this.handleHoverOut);
    }
  }

  isSamePage() {
    const href = this.link.getAttribute("href");
    const currentPath = window.location.pathname;

    const normalize = (path) => {
      let normalized = path.replace(/\/+/g, "/").replace(/\/$/, "");

      if (!normalized.startsWith("/") && !normalized.startsWith("http")) {
        const base = currentPath.substring(0, currentPath.lastIndexOf("/") + 1);
        normalized = base + normalized;
      }

      normalized = normalized
        .replace(/\/index\.html$/, "")
        .replace(/^index\.html$/, "/");

      return normalized || "/";
    };

    const current = normalize(currentPath);
    const target = normalize(href);

    if (current.startsWith("mail:to") || current.startsWith("https://")) {
      return false;
    }

    return current === target;
  }

  handleHoverIn() {
    const line = this.querySelector(".line_a_inner");

    if (!line) {
      this.link.style.cursor = "default";
      return;
    }

    this.link.style.cursor = "pointer";
    gsap.set(line, { x: "-101%" });
    gsap.killTweensOf(line);
    gsap.to(line, { x: 0, duration: 0.8, ease: "power3.out" });
  }

  handleHoverOut() {
    const line = this.querySelector(".line_a_inner");

    if (!line) return;

    gsap.killTweensOf(line);
    gsap.to(line, { x: "101%", duration: 0.5, ease: "power3.out" });
  }

  handleClick(e) {
   

    if (this.isSamePage()) {
      e.preventDefault();
    }
  }

  render() {
    const href = this.getAttribute("href");
    const text = this.textContent.trim();
    const blank = this.getAttribute("target") || null;
    const rel = this.getAttribute("rel") || null;
    this.innerHTML = /*html*/ `
      <a href="${href}" ${rel ? `rel="${rel}"` : ""} ${blank ? `target="${blank}"` : ""} class="links items_anim">
        ${text}
        <div class="line_a">
          <div class="line_a_inner"></div>
        </div>
      </a>
    `;

    this.link = this.querySelector("a");
  }
}

customElements.define("link-c", Link);

import { gsap } from "../lib/index";

export function wrap_lines(el) {
  el.lines.forEach((line) => {
    const wrapper = document.createElement("div");
    wrapper.style.cssText = `
      overflow: hidden;
      line-height: 100%;
      transform: translateZ(0);
      backface-visibility: hidden;
      margin-bottom: 0.1rem;
    `;
    line.parentNode.insertBefore(wrapper, line);
    wrapper.appendChild(line);
  });

  gsap.set(el.lines, {
    y: "100%",

    force3D: true,
    willChange: "transform",
  });
}

export function wrap_chars(el) {
  // el.chars.forEach((char) => {
  //   const wrapper = document.createElement("span");
  //   wrapper.style.cssText = `
  //     overflow-y: hidden;
  //     perspective: 1000px;
  //     background-color:aqua;
  //   `;
  //   wrapper.classList.add("char-wrapper");
  //   char.parentNode.insertBefore(wrapper, char);
  //   wrapper.appendChild(char);
  // });

  gsap.set(el.chars, {
    y: "100%",
    force3D: true,
    rotateX: 60,
  });
}

export default { wrap_lines, wrap_chars };

import { gsap } from "gsap";

import { CustomEase } from "gsap/CustomEase";
import { SplitText } from "gsap/dist/SplitText";

gsap.registerPlugin(CustomEase);
gsap.registerPlugin(SplitText);

export const customEases = {
  pageTransition: CustomEase.create(
    "pageTransition",
    "M0,0 C0.38,0.05 0.48,0.58 0.65,0.82 0.82,1 1,1 1,1",
  ),
  pageTransition2: CustomEase.create(
    "pageTransition2",
    "M0,0 C0.178,0.031 0.279,0.802 0.345,0.856 0.421,0.918 0.374,1 1,1 ",
  ),
};

export { gsap, SplitText };

export default { gsap, customEases, SplitText };

import "./style.css";
import "./components/index.js";
import { router } from "./router.js";
router.init();

<section class="hero">
  <div class="hero_content">
    <div class="links_codrops">
      <link-c href="https://tympanus.net/codrops/?p=109206" target="_blank">TUTORIAL</link-c>
      <link-c href="https://tympanus.net/codrops/hub/" target="_blank">MORE DEMOS</link-c>
    </div>
    <div class="lists_c">
      <ul>
        <li>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">NAME</p>
          <p class="anim_p">Flower Still Life with a Timepiece</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">ARTIST</p>
          <p class="anim_p">Willem van Aelst</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">DATE</p>
          <p class="anim_p">1663</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
      </ul>

      <ul>
        <li class="desktop">
          <div class="lines desktop">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
        <li>
          <p class="anim_p2">LOCATION</p>
          <p class="anim_p2">Mauritshuis, La Haye</p>
          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
        <li>
          <p class="anim_p2">Style</p>
          <p class="anim_p2">Baroque</p>
          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
        <li>
          <p class="anim_p2">Dimensions</p>
          <p class="anim_p2">62,5 × 49 cm</p>
          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
      </ul>
    </div>

    <h1 class="about_title">WV.663</h1>
  </div>
</section>

import { gsap } from "../../lib/index";
import template from "./about.html?raw";
import ENTER from "../../animations/Enter";
export default function AboutPage() {
  return template;
}

export function init(options = {}) {
  const container =
    options.container ||
    document.querySelector('[data-transition="container"]');

  const enterData = ENTER(container, 0.32);

  if (enterData?.splitInstance) {
    container._splitInstance = enterData.splitInstance;
  }
}

export function cleanup() {
  const container = document.querySelector('[data-transition="container"]');

  if (container?._splitInstance) {
    const h1 = container.querySelector("h1");

    if (h1) {
      gsap.set(h1.querySelectorAll(".char-wrapper > *"), { clearProps: "all" });
    }

    // container._splitInstance.revert();
    container._splitInstance = null;

    if (h1) {
      const wrappers = h1.querySelectorAll(".char-wrapper");
      wrappers.forEach((wrapper) => {
        const char = wrapper.firstChild;
        wrapper.parentNode.insertBefore(char, wrapper);
        // wrapper.remove();
      });
    }
  }
}

<section class="hero">
  <div class="hero_content">
    <div class="links_codrops">
      <link-c href="https://tympanus.net/codrops/?p=109206" target="_blank">TUTORIAL</link-c>
      <link-c href="https://tympanus.net/codrops/hub/" target="_blank">MORE DEMOS</link-c>
    </div>
    <div class="lists_c">
      <ul>
        <li>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">NAME</p>
          <p class="anim_p">L'Apothéose d'Hercule</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">ARTIST</p>
          <p class="anim_p">François Lemoyne</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
        <li>
          <p class="anim_p">DATE</p>
          <p class="anim_p">1733-1736</p>
          <div class="lines">
            <div class="inner_lines inner_linesleft"></div>
          </div>
        </li>
      </ul>
      <!-- <img class="img_hero_small" alt="Oeuvre" src="/images/home.webp"></img> -->
      <ul>
        <li class="desktop">
          <div class="lines desktop">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
        <li>
          <p class="anim_p2">LOCATION</p>
          <p class="anim_p2">Château de Versailles</p>

          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
        <li>
          <p class="anim_p2">Style</p>
          <p class="anim_p2">French baroque</p>

          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>

        <li>
          <p class="anim_p2">Dimensions</p>
          <p class="anim_p2">480m2</p>

          <div class="lines">
            <div class="inner_lines inner_linesright"></div>
          </div>
        </li>
      </ul>
    </div>

    <h1 class="home_title">AH.736</h1>
  </div>
</section>

import template from "./home.html?raw";
import { gsap } from "../../lib/index";
import ENTER from "../../animations/Enter";
export default function HomePage() {
  return template;
}

export function init(options = {}) {
  const container =
    options.container ||
    document.querySelector('[data-transition="container"]');

  const enterData = ENTER(container, 0.32);

  if (enterData?.splitInstance) {
    container._splitInstance = enterData.splitInstance;
  }
}

export function cleanup() {
  const container = document.querySelector('[data-transition="container"]');

  if (container?._splitInstance) {
    const h1 = container.querySelector("h1");

    if (h1) {
      gsap.set(h1.querySelectorAll(".char-wrapper > *"), { clearProps: "all" });
    }

    container._splitInstance = null;

    if (h1) {
      const wrappers = h1.querySelectorAll(".char-wrapper");
      wrappers.forEach((wrapper) => {
        const char = wrapper.firstChild;
        wrapper.parentNode.insertBefore(char, wrapper);
        // wrapper.remove();
      });
    }
  }
}

import { executeTransition } from "./transitions/pageTransition.js";

const routes = {
  "/": {
    namespace: "home",
    loader: () => import("./pages/home/home.js"),
  },
  "/alternative-page": {
    namespace: "about",
    loader: () => import("./pages/about/about.js"),
  },
};

class Router {
  constructor() {
    this.currentPage = null;
    this.currentNamespace = null;
    this.isTransitioning = false;
  }

  async init() {
    await this.loadInitialPage();

    document.addEventListener("click", (e) => {
      const link = e.target.closest("a");
      if (!link || !link.href.startsWith(window.location.origin)) return;

      e.preventDefault();
      if (this.isTransitioning) return;

      const path = new URL(link.href).pathname;
      this.navigate(path);
    });

    window.addEventListener("popstate", () => {
      if (!this.isTransitioning) {
        this.performTransition(window.location.pathname);
      }
    });
  }

  async loadInitialPage() {
    const path = window.location.pathname;
    const route = routes[path] || routes["/"];

    const pageModule = await route.loader();
    const content = document.getElementById("page_content");
    content.innerHTML = pageModule.default();

    const container = document.querySelector('[data-transition="container"]');
    container.setAttribute("data-namespace", route.namespace);

    if (pageModule.init) {
      pageModule.init({ container });
    }

    this.currentPage = pageModule;
    this.currentNamespace = route.namespace;
  }

  async navigate(path) {
    if (this.isTransitioning) return;
    if (window.location.pathname === path) return;

    window.history.pushState({}, "", path);
    await this.performTransition(path);
  }

  async performTransition(path) {
    if (this.isTransitioning) return;
    this.isTransitioning = true;

    try {
      const route = routes[path];
      if (!route || this.currentNamespace === route.namespace) return;

      if (this.currentPage?.cleanup) {
        this.currentPage.cleanup();
      }

      const pageModule = await route.loader();

      await executeTransition({
        currentNamespace: this.currentNamespace,
        nextNamespace: route.namespace,
        nextHTML: pageModule.default(),
        nextModule: pageModule,
      });

      this.currentPage = pageModule;
      this.currentNamespace = route.namespace;
    } finally {
      this.isTransitioning = false;
    }
  }
}

export const router = new Router();

import fs from 'fs';

const baseUrl = 'https://ton-site.com';
const routes = ['/', '/about'];

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${routes.map(route => `  <url>
    <loc>${baseUrl}${route === '/' ? '' : route}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <changefreq>${route === '/' ? 'weekly' : 'monthly'}</changefreq>
    <priority>${route === '/' ? '1.0' : '0.8'}</priority>
  </url>`).join('\n')}
</urlset>`;

fs.writeFileSync('/sitemap.xml', sitemap);

const metaConfig = {
  home: {
    title: "Building Asynchronous Page Transitions in Vanilla JavaScript",
    description: "In this tutorial, we'll build a lightweight async page transition system from scratch using vanilla JavaScript, GSAP, and Vite",

  },
  about: {
  title: "Building Asynchronous Page Transitions in Vanilla JavaScript",
    description: "In this tutorial, we'll build a lightweight async page transition system from scratch using vanilla JavaScript, GSAP, and Vite",

  },
 
};

export function updateMetaTags(namespace) {
  const meta = metaConfig[namespace];
  
  if (!meta) return;

  // Title
  document.title = meta.title;

  // Description
  updateOrCreateMeta('name', 'description', meta.description);

  // Keywords
//   updateOrCreateMeta('name', 'keywords', meta.keywords);

  // Open Graph
//   updateOrCreateMeta('property', 'og:title', meta.title);
//   updateOrCreateMeta('property', 'og:description', meta.description);
//   updateOrCreateMeta('property', 'og:image', meta.ogImage);
//   updateOrCreateMeta('property', 'og:url', window.location.href);
//   updateOrCreateMeta('property', 'og:type', 'website');

//   updateOrCreateMeta('name', 'twitter:card', 'summary_large_image');
//   updateOrCreateMeta('name', 'twitter:title', meta.title);
//   updateOrCreateMeta('name', 'twitter:description', meta.description);
//   updateOrCreateMeta('name', 'twitter:image', meta.ogImage);
}

function updateOrCreateMeta(attr, key, content) {
  let element = document.querySelector(`meta[${attr}="${key}"]`);
  
  if (!element) {
    element = document.createElement('meta');
    element.setAttribute(attr, key);
    document.head.appendChild(element);
  }
  
  element.setAttribute('content', content);
}

export default { updateMetaTags, metaConfig };

@import './styles/index.css';
:root {
  --text_color: rgb(0, 0, 0);
  --spacing: '20px';
}
body {
  margin: 0;
  padding: 0;
  position: relative;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  background-color: #000000;
  color: var(--text_color);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  background-color: #ffffff;
  width: 100%;
}

@import "./reset.css";
@import "./navigation/nav.css";
@import "./navigation/links.css";
@import "./pages/app.css";
@import "./variables.css";

.links {
  position: relative;
  display: block;
  text-transform: uppercase;
}
.line_a {
  width: 100%;
  height: 1px;
  overflow: hidden;
}
.line_a_inner {
  width: 100%;
  height: 100%;
  background-color: var(--text_color);
  transform: translateX(-100%) translateZ(0);
  will-change: transform;
}
@media (max-width: 900px) {}

.nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  display: flex;
  gap: 20px;
  padding: 20px 0;
  z-index: 50;
  justify-content: center;
  width: fit-content;
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    left: auto;
    right: 0;
    transform: none;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    padding: 20px 20px;
    z-index: 50;
    align-items: end;
    width: fit-content;
  }
}

.page_content {
  transform: translateZ(0);
  backface-visibility: hidden;
}
#page_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lists_c {
  width: 100%;
  display: flex;
  margin-top: 80px;
}
dl {
  display: flex;
  width: 100%;
}
.hero_content {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  justify-content: space-between;
  opacity: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  justify-content: space-between;
  height: 100vh;
}

.hero_content li {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative;
  padding: 10px 0;
  font-size: 12px;
  text-transform: uppercase;
}

.lines {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
}
.inner_lines {
  background-color: black;
  width: 100%;
  height: 100%;
}

.inner_linesright {
  transform: translateX(-100%);
}

.inner_linesleft {
  transform: translateX(100%);
}
.hero_content ul {
  width: 100%;

  padding: 0 20px;
}

.inner_linesright,
.inner_linesleft {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.anim_p {
  backface-visibility: hidden;
}

h1 {
  backface-visibility: hidden;
  perspective: 1000px;
}

.char-wrapper {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}

.links_codrops {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  gap: 20px;
  pointer-events: auto;
  z-index: 20;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .lists_c {
    width: 100%;

    display: flex;
    flex-direction: column;
    margin-top: 80px;
  }
  dl {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .desktop {
    display: none;
    padding: 0 !important;

    height: 0;
  }
  .lists_c ul {
    width: 100%;
  }
  .hero_content ul {
    width: 90%;

    padding: 0 20px;
  }

  .links_codrops {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 10px;
    pointer-events: auto;
    z-index: 20;
  }
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
  line-height: 100%;
  display: flex;
}
p {
  margin: 0;
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  line-height: 100%;
  font-size: 13px;
}
button {
  border: none;
  background-color: transparent;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
  line-height: 0;
}

a {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  text-decoration: none;
  cursor: pointer;
  color: var(--text_color);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
  flex: 1;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
::selection {
  background-color: #676767;
  mix-blend-mode: difference;
  color: #ffffff;
}

::-moz-selection {
  background-color: #000000;
  color: #ffffff;
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #000;
}
::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 0px;
  width: 0px;
  height: 10px;
}

h1 {
  overflow: hidden;

  padding-left: 1vw;
  padding-right: 1vw;

  line-height: 82%;
}

.home_title {
  font-size: 26vw;
}

.about_title {
  font-size: 26vw;
}
.overflow {
  overflow: hidden;
}

.title {
  transform: translateY(100%) rotateX(80deg);
}
[data-transition='container'] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

import { gsap, customEases } from "../../lib/index.js";

export function alternativeTransition(currentContainer, nextContainer) {
  gsap.set(nextContainer, {
    opacity: 1,
    position: "fixed",
    top: 0,

    left: 0,
    width: "100%",
    height: "100vh",
    x: "100%",
    zIndex: 10,
  });

  const tl = gsap.timeline();

  tl.to(
    currentContainer,
    {
      x: "-50%",
      scale: 0.8,
      opacity: 0.4,
      duration: 1.5,
      force3D: true,
      ease: customEases.pageTransition2,
    },
    0,
  )

    .to(
      nextContainer,
      {
        x: 0,
        duration: 1.5,

        force3D: true,
        ease: customEases.pageTransition2,
      },
      0,
    );

  return tl;
}

import { gsap, customEases } from "../../lib/index.js";

export function defaultTransition(currentContainer, nextContainer) {
  gsap.set(nextContainer, {
    clipPath: "inset(100% 0% 0% 0%)",
    opacity: 1,
    position: "fixed",
    top: 0,

    left: 0,
    width: "100%",
    height: "100vh",
    zIndex: 10,
  });

  const tl = gsap.timeline();

  tl.to(
    currentContainer,
    {
      y: "-30vh",
      opacity: 0.4,
      scale: 0.8,
      duration: 0.7,
      force3D: true,
      ease: customEases.pageTransition,
    },
    0,
  )

    .to(
      nextContainer,
      {
        clipPath: "inset(0% 0% 0% 0%)",
        duration: 0.7,
        force3D: true,

        ease: customEases.pageTransition,
      },
      0,
    );

  return tl;
}

import { defaultTransition } from "./default";

export { defaultTransition };

import { gsap } from "../lib/index.js";

import { getTransition } from "./registry.js";
export async function executeTransition({
  currentNamespace,
  nextNamespace,
  nextHTML,
  nextModule,
}) {
  const currentContainer = document.querySelector(
    '[data-transition="container"]',
  );
  const wrapper = document.querySelector('[data-transition="wrapper"]');

  const nextContainer = currentContainer.cloneNode(false);
  nextContainer.setAttribute("data-namespace", nextNamespace);

  const content = document.createElement("main");
  content.id = "page_content";
  content.className = "page_content";
  content.innerHTML = nextHTML;
  nextContainer.appendChild(content);

  wrapper.appendChild(nextContainer);
  const images = nextContainer.querySelectorAll("img");
  if (images.length > 0) {
    await Promise.all(
      Array.from(images).map(
        (img) =>
          new Promise((resolve) => {
            if (img.complete) return resolve();
            img.onload = resolve;
            img.onerror = resolve;
          }),
      ),
    );
  }

  if (nextModule.init) {
    nextModule.init({ container: nextContainer });
  }

  const transitionFn = getTransition(currentNamespace, nextNamespace);
  const timeline = await transitionFn(currentContainer, nextContainer);

  await timeline.then();

  currentContainer.remove();
  gsap.set(nextContainer, {
    clearProps: "clipPath,position,top,left,width,height,zIndex,opacity",
    force3D: true,
  });
}

import { defaultTransition } from "./animations/index";

import { alternativeTransition } from "./animations/alternative.js";
export const transitionRegistry = {
  "home-to-about": defaultTransition,

  "about-to-home": defaultTransition,

  default: defaultTransition,
};

export function getTransition(currentNamespace, nextNamespace) {
  const key = `${currentNamespace}-to-${nextNamespace}`;
  const transition = transitionRegistry[key] || transitionRegistry.default;

  return transition;
}

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 3000,
  },
});

Building Async Page Transitions in Vanilla JavaScript
Original author: Valentin Mor
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.

README.md
## License

[MIT](LICENSE)

GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.

Standard "No Charge" GSAP License

 I. DEFINITIONS

 “GSAP License” means the terms and conditions of this GSAP Software License Agreement.

 "GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.

 "Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).

 "Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.

 "Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).

 II. GRANT OF LICENSE

 Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.

 III. RESTRICTIONS

 You may not:

 Use any GSAP Products for any Prohibited Uses without prior written consent;

 Reverse engineer any GSAP Products for the purpose of creating Competitive Products;

 Remove or alter any proprietary notices or branding from GSAP Products.

 IV. OWNERSHIP AND INTELLECTUAL PROPERTY

 All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.

 V. TERMINATION

 Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.

 VI. MISCELLANEOUS PROVISIONS

 General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.

 Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).

 No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.

 FAQ

 Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
 Absolutely! AI-generated code is not a "Prohibited Use".

 What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
 We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!

 Can I really use GSAP in commercial projects without paying anything?
 Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚

 Effective date: April 30, 2025

 Last modified date: May 30, 2025

 Copyright (©) 2025, Webflow