Heute zeige ich euch eine coole Idee wie ihr eine Bildergalerie mit der Maus steuern könnt. Wenn man nach unten scrollt werden die Bilder einzeln eingeblendet und wenn man wieder hoch scrollt verschwinden die Bilder wieder in alle Richtungen. Diese Animation ist reines GSAP in Kombination mit dem ScrollTrigger.

Und heute zeige ich euch wie man so eine coole Galerie programmieren kann.

Video

GSAP Bibliothek

Damit ihr GSAP verwenden könnt, müsst ihr die Javascript Bibliothek natürlich zuerst ein eure Webseite einbinden. Hier findet ihr den entsprechenden Code auf der GSAP Webseite

HTML

<div class="start">
      <h1>Start</h1>
    </div>
    <div class="haupt">
      <div class="wrapper">
        <img src="pic/bild1.jpg" />
      </div>
      <div class="wrapper">
        <img src="pic/bild2.jpg" />
      </div>
      <div class="wrapper">
        <img src="pic/bild3.jpg" />
      </div>
      <div class="wrapper">
        <img src="pic/bild4.jpg" />
      </div>
      <div class="wrapper">
        <img src="pic/bild5.jpg" />
      </div>
    </div>
    <div class="ende">
      <h1>Ende</h1>
    </div>

CSS

body {
  background: var(--bg);
}

.start {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-start);
}
.haupt {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-haupt);
}

.ende {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-ende);
}

h1 {
  font-size: 3rem;
  color: var(--h1);
}

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

.wrapper {
  position: absolute;
  width: 350px;
  aspect-ratio: 1;
  border-radius: 10px;
  padding: 8px 8px 24px 8px;
  background: #fafafa;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
  will-change: transform; /* for smoother animation */
  visibility: hidden;
}

Javascript

document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(ScrollTrigger);

    const images = gsap.utils.toArray(".wrapper");

    const startPositions = [
        {x: "-90vw", y: "-50vw"},
        {x: "120vw", y: "-60vw"},
        {x: "-130vw", y: "60vw"},
        {x: "0vw", y: "-200vw"},
        {x: "10vw", y: "100vw"}
    ];

    const endPosition = [
       {x: "-30%", y: "20%", rotation: 7},
       {x: "40%", y: "-40%", rotation: -12},
       {x: "-45%", y: "-20%", rotation: 10},
       {x: "18%", y: "25%", rotation: -15},
       {x: "0%", y: "0%", rotation: 0}
    ];

    images.forEach((wrapper, i) => {
        gsap.set(wrapper,{
            x: startPositions[i].x,
            y: startPositions[i].y,
            rotation: gsap.utils.random(-60,60),
            scale: 0.5,
            visibility: "visible",
        })
    });

    const imagesTL = gsap.timeline({
        scrollTrigger: {
            trigger: ".haupt",
            start: "center center",
            scrub: 2,
            pin: true,
            anticipatePin: 1,
        }
    });

    images.forEach((wrapper, i) => {
        imagesTL.to(wrapper, {
            x: endPosition[i].x,
            y: endPosition[i].y,
            rotation: endPosition[i].rotation,
            scale: 1,
            ease: "power2.out",
            duration: 1
        } )
    })


})