ScrollTrigger Animation nur mit CSS

So einen Effekt mit dem Runterscrollen durch eine Maus zu verbinden, das nennt man einen ScrollTrigger, und viele Videos, die ich bereits gemacht habe, brauchen dafür GSAP.

Und genau hier liegt der Unterschied, denn wenn ihr mit GSAP arbeitet, müsst ihr eine JS-Bibliothek zusätzlich einbinden und evtl. noch weitere Erweiterungen. Wenn ihr aber diesen Weg nehmt, dann braucht ihr das nicht, denn es ist reines CSS.

CSS wird immer besser.

Video

HTML

<div class="section1">
      <h1>Start</h1>
    </div>
    <div class="section2">
      <img src="essen.jpg" />
    </div>
    <div class="section3">
      <h1>Ende</h1>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.section1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #6e0087;
}
.section3 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #41004f;
}

h1 {
  color: #fff;
  font-size: 5rem;
}

.section2 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.section2 img {
  width: 700px; /* Größe anpassen nach Wunsch, z.B. 40%, 300px, etc. */
  height: auto;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  animation: einblenden linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}