Wie erstelle ich eine Scroll Animation mit normalen CSS ohne GSPA?

Heute zeige ich euch, dass man für Scroll Animationen nicht unbedingt GSAP brauchen muss sondern es auch mit reinem CSS geht.

Scroll Animationen sind eine coole Sache und bisher musste man dafür GSAP verwenden. GSAP ist eine (neu) freie Bibliothek mit dem man coole Animationen erstellen kann. Ich habe ja darüber schon öfters hier Scripte gezeigt.

Jetzt aber hat CSS ein Update gemacht das bereits von den meisten Browsern erkannt wird und das macht alles viel einfacher.

Und alles was ich hier zeige ist erst der Anfang

Video

HTML

<div class="page1">
      <h2>Seite 1</h2>
    </div>
    <div class="page2">
      <h2>Seite 2</h2>
      <div class="texteinblenden">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati enim
        voluptate dignissimos quis adipisci ipsa maiores sunt tempore sequi.
      </div>
    </div>
    <div class="page3">
      <h2>Seite 3</h2>
      <div class="bilder">
        <img src="auto1.jpg" class="bildeinblenden" /><img src="auto2.jpg" class="bildeinblenden" /><img src="auto3.jpg" class="bildeinblenden" />
      </div>
    </div>
    <div class="page4">
      <h2>Seite 4</h2>
    </div>

CSS

:root {
  --p1: #250902;
  --p2: #38040e;
  --p3: #640d14;
  --p4: #800e13;
  --font: #ffffff;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--p1);
  color: var(--font);
  font-size: 5rem;
}
.page2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  background-color: var(--p2);
  color: var(--font);
  font-size: 2rem;
}
.page3 {
  min-height: 100vh;
  background-color: var(--p3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--font);
  font-size: 2rem;
}
.page4 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--p4);
  color: var(--font);
  font-size: 5rem;
}

.texteinblenden {
  animation: texteinblenden both;
  /*
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  */
  /* finish start in %  */
  animation-timeline: view(40% 5%);
  width: 80%;
}

.bildeinblenden {
  animation: bildeinblenden both;
  animation-timeline: view();
}

@keyframes texteinblenden {
  from {
    opacity: 0;
    transform: translateX(120%);
    scale: 0.5;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    scale: 1;
  }
}

@keyframes bildeinblenden {
  from {
    scale: 0.5;
  }
  to {
    scale: 1;
  }
}