GSAP Versteckte ScrollTrigger Anzeige einrichten

Heute möchte ich euch einen weiteren coolen GSAP-Trick zeigen. Und zwar kann man versteckte Sektionen sehr kreativ in einer Webseite einblenden und alles wird durch das Scrollen ausgelöst.

Also stellt euch vor, ihr habt eine Webseite mit verschiedenen Sektionen und während ihr herunterscrollt, erscheint dann eine versteckte Sektion, und zwar mitten in einer angepinnten Sektion.

Ja, es muss nicht alles zack, zack, zack sichtbar sein, sondern manchmal kann man auch Dinge verstecken, die dann wieder erscheinen – so etwas macht eine Webseite lebendig.

Video

HTML

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

<section class="sektion1" id="sektion1">
      <div class="inner">
        <h1>Start</h1>
      </div>
    </section>

    <div class="pin">
      <section class="sektion2" id="sektion2">
        <div class="spalten">
          <div class="bild">
            <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=80" alt="Quadratisches Bild" />
          </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. Ut enim ad minim veniam.</p>
          </div>
        </div>
      </section>

      <div class="clip" id="clip">
        <section class="sektion3" id="sektion3">
          <div class="galerie">
            <div class="karte"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&q=80" alt="Bild 1" /></div>
            <div class="karte"><img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=800&q=80" alt="Bild 2" /></div>
            <div class="karte"><img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&q=80" alt="Bild 3" /></div>
          </div>
        </section>
      </div>
    </div>

    <section class="sektion4" id="sektion4">
      <div class="inner">
        <h2>Ende</h2>
      </div>
    </section>

CSS

:root {
  --indigo: #2d3561;
  --navy: #1a1a2e;
  --grey: #8b9dc3;
  --offwhite: #f5f5f5;
  --black: #0f0f1a;
  --white: #ffffff;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: "Playfair Display", Georgia, serif;

  --max: 1200px;
  --shadow: 0 30px 60px -20px rgba(15, 15, 26, 0.25);
}

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

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

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

.sektion1,
.sektion2,
.sektion3,
.sektion4 {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

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

.sektion1 {
  background: var(--indigo);
  color: var(--white);
}
.sektion4 {
  background: var(--navy);
  color: var(--white);
}

.sektion1 h1,
.sektion4 h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 1rem 0 1.5rem;
}

.pin {
  position: relative;
  width: 100%;
  height: 100vh;
}

.sektion2 {
  z-index: 1;
  background: var(--offwhite);
  color: var(--black);
}

.spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

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

.text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

.text p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(15, 15, 26, 0.75);
  margin-bottom: 1rem;
  max-width: 38ch;
}

/* ----- scrolltrigger bereich ----- */
.clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}

.sektion3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--grey);
  color: var(--white);
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

.karte {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

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

GSAP

gsap.registerPlugin(ScrollTrigger);

function init() {
  const clip = document.getElementById("clip");
  if (!clip) return;

  gsap.set(clip, { clipPath: "circle(0% at 50% 50%)", webkitClipPath: "circle(0% at 50% 50%)" });

  gsap.timeline({
    scrollTrigger: {
      trigger: ".pin",
      start: "top top",
      end: "+=70%",
      pin: true,
      scrub: 1,
      anticipatePin: 1,
    }
  })
  .to(clip, {
    clipPath: "circle(150% at 50% 50%)",
    webkitClipPath: "circle(150% at 50% 50%)",
    ease: "power2.inOut",
    duration: 1,
  });
}

window.addEventListener("load", () => {
  init();
  setTimeout(() => ScrollTrigger.refresh(), 300);
});