Wie kann ich mit GSAP Bilder animieren?

Habt ihr euch schon mal gefragt wie man mehrere Bilder mit GSAP animieren kann? Wie man einzelne Bilder animiert, das kennen wir bereits, aber was ist wenn man mehrere Bilder hat? Die dann sogar noch nach einander animiert werden sollen? Das schauen wir uns heute an.

Video

GSAP verlinken

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>

HTML

<div class="container">
      <div class="img-container">
        <div class="img-wrapper">
          <img src="bild1.jpg" />
        </div>
        <div class="img-wrapper">
          <img src="bild2.jpg" />
        </div>
        <div class="img-wrapper">
          <img src="bild3.jpg" />
        </div>
      </div>
    </div>

CSS

:root {
  --start: #01057f;
  --container: #3c017f;
  --ende: #367f01;
}

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

img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.img-container {
  display: flex;
  column-gap: 20px;
}

.img-wrapper {
  position: relative;
  flex: 1;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  filter: drop-shadow(2px 4px 8px rgba(28, 29, 30, 0.6));
  overflow: hidden;
}

.img-wrapper img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (max-width: 700px) {
  .img-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }
}

GSAP

document.addEventListener("DOMContentLoaded", () =>{

    const images = document.querySelectorAll(".img-wrapper img");


gsap.set(images, {
    autoAlpha:0,
    clipPath: "polygon(50% 0, 50% 100%, 50% 100%, 50% 0)",
    filter: "blur(3px)",
    x: "5%",
    y: "5%",
})

const tl = gsap.timeline({
    delay: 1.5,
});

images.forEach((img) => {
    tl.to(
        img,
        {
            clipPath:"polygon(0% 0, 0% 100%, 100% 100%, 100% 0)",
            autoAlpha: 1,
            filter: "blur(0px)",
            x: "0%",
            y: "0%",
            duration: 1.5,
            ease: "power2.out",
        }
    )

})


});