Heute zeige ich euch wie ihr mit GSAP und 2 Bewegungsanimationen so einen coolen Titel animieren könnt.

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="container">
      <div>Basic: 1993</div>
      <div>HTML: 1995</div>
      <div>WordPress: 2005</div>
      <div>Social Media: 2007</div>
      <div>E-Commerce: 2008</div>
    </div>

CSS

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

.container div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  white-space: nowrap;

  color: var(--schrift);
  font-size: 2.5rem;
  font-weight: 600;
}

Javascript

let tl = gsap.timeline({
    repeat: -1,
    repeatDelay: 1,
});

let dauer = 1;


    tl.from(".container div", {y:50, opacity:0, stagger: dauer})
    .to(".container div", {
        y:-50, 
        opacity: 0, 
        stagger: dauer,
        color: "#b20000",
}, dauer)