GSAP Bild im Pixeleffekt einblenden

Heute zeige ich euch einen weiteren coolen GSAP Effekt und zwar lassen wir unsichtbare Bilder verpixelt wieder einblenden. Ein sehr cooler Effekt wenn man Bilder ein wenig anders einblenden möchte.

Video

GSAP

Wie immer müsst ihr natürlich zuerst GSAP in euer HTML Dokument einbinden. Hier findet ihr die CDN Adressen dafür
https://gsap.com/docs/v3/Installation

HTML

<div class="container">
      <div class="imgcontainer">
        <img src="essen.jpg" />
        <div class="pixelcontainer"></div>
      </div>
    </div>

CSS

:root {
  --bg: #bdbdbd;
}

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

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

.container {
  width: 100%;
  height: 100vh;

  display: grid;
  place-items: center;
}

.imgcontainer {
  width: 500px;
  height: 500px;
  position: relative;
}

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

.pixelcontainer {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.pixel {
  background: var(--bg);
}

GSAP

const pixelcontainer = document.querySelector(".pixelcontainer");

for (let i = 0; i < 100; i++){
    const pixel = document.createElement("div");
    pixel.className = "pixel";
    pixelcontainer.appendChild(pixel);
}



const tl = gsap.timeline();

tl.to(".pixel", {
    opacity: 0,
    duration: 0.1,
    stagger: {amount: 2, from: "random"}

});

Das sind die anderen Verfügbaren From Befehle für Stagger: random, center, end, start, edges
Hier findet ihr auch die Dokumentation dafür Staggers