Wie programmiere ich einen Preloader mit GSAP?

Ein Preloader ist eine sehr nützliche Sache bei grossen Webseiten. Wenn man viele Elemente auf einer Seite hat, dann kostet es Zeit, bis alles geladen ist – Bilder, Videos, GIFs – alles kostet Zeit, bis alles sauber läuft. Damit der Webseitenbesucher nicht sieht, wie die einzelnen Elemente eingeblendet werden und er sich in dieser Zeit aufregen kann, baut man oft einen Preloader ein. Das ist eine kleine Animation, die genau dann aufhört, wenn alles im Hintergrund geladen worden ist – ja, man lenkt den Webseitenbesucher damit ab.

Heute zeige ich euch, wie man so einen Preloader mit GSAP relativ einfach bauen kann.

Video

HTML

Als erstes müsst ihr natürlich oben GSAP installieren
https://gsap.com/docs/v3/Installation/

<div class="preloader" id="preloader">
      <div class="logo">Eric-Oliver Mächler</div>
    </div>

    <main class="seite">
      <section class="sektion sektion1" id="sektion1">
        <div class="inner">
          <h1>hallo</h1>
        </div>
      </section>

      <section class="sektion sektion2" id="sektion2">
        <div class="spalten">
          <div class="bild">
            <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=80" alt="" />
          </div>
          <div class="text">
            <h2>Lorem ipsum dolor<br />sit amet consectetur.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </section>

      <section class="sektion sektion3" id="sektion3">
        <div class="inner">
          <h2>Viel Spass<br />beim Webdesignen</h2>
        </div>
      </section>
    </main>

CSS

:root {
  --forest: #1f3d2a;
  --green: #3e6b4a;
  --mint: #a8c5ae;
  --cream: #eef2ea;
  --white: #ffffff;
  --black: #0f0f1a;

  --logo: clamp(3rem, 10vw, 8rem);
  --titel: clamp(2.5rem, 7vw, 5.5rem);
  --sub: clamp(1.75rem, 3.5vw, 2.75rem);
  --body: 1rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

body.loading {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  font-weight: 700;
  font-size: var(--logo);
  letter-spacing: 0.05em;
  color: var(--white);
  opacity: 0;
  transform: scale(0.85);
}

/* sektionen */
.sektion {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.sektion1 {
  background: var(--green);
  color: var(--white);
}
.sektion2 {
  background: var(--cream);
  color: var(--black);
}
.sektion3 {
  background: var(--forest);
  color: var(--white);
}

.inner {
  text-align: center;
  max-width: 900px;
}

.sektion1 h1,
.sektion3 h2 {
  font-weight: 700;
  font-size: var(--titel);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* sektionen 2 */
.spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}

.text h2 {
  font-weight: 700;
  font-size: var(--sub);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

.text p {
  font-size: var(--body);
  line-height: 1.7;
  color: color-mix(in srgb, var(--black) 75%, transparent);
  max-width: 38ch;
}

@media (max-width: 768px) {
  .spalten {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .bild {
    max-width: 320px;
    margin: 0 auto;
  }
}

GSAP

gsap.set("body", { className: "loading" });

const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

tl.to(".logo", {
  opacity: 1,
  scale: 1,
  duration: 0.8,
})
.to({}, { duration: 0.4 }) 
.to(".preloader", {
  yPercent: -100,
  duration: 1,
  ease: "power2.inOut",
})
.set("body", { className: "" }); 


window.addEventListener("load", () => tl.play());