Ich habe hier ja schon öfters etwas über GSAP erzählt und heute wird es Zeit, dass ich euch mal die Grundlagen dafür beibringe. Im heutigen Teil geht es um die Animation von Objekte.

Wie bewege ich Objekte
Wie verkleinere ich Objekte
Wie drehe ich Objekte
Wie mach ich sie durchsichtig

Und noch viel mehr.

Hier lernt ihr wie ihr verschiedene Objekte auf eurer Webseite animieren könnt und zwar mit dieser coolen freien Bibliothek. Damit kann man schon viel cooles anstellen wie Text und Bildanimationen.

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

<img class="bild" src="glace.svg" width="100" />

CSS

:root {
  --bg: #ffd096;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.bild {
  opacity: 0;
}

Javascript

document.addEventListener("DOMContentLoaded", () => {
/*gsap.from*/
    gsap.to(".bild", {
    x:500, 
    y:200,
    duration: 1,
    rotation: 360,
    scale: 2,
    delay: 2,
    /*runBackwards: true,*/
    yoyo:true,
    repeat:-1,
repeatDelay: 2,
opacity: 1, /* element im dom messbar */

    
})
});