Diese Art von Animation sieht man immer wieder gerne. Man kann nämlich nicht nur ganze Wörter animieren sondern auch Buchstabe für Buchstabe und zwar einer genialen Javascript Bibliothek genannt GSA.

Ihr denkt jetzt sicher, momentmal das sieht zwar cool aus ist aber vermutlich ziemlich kompliziert zum erstellen, den kann ich beruhigen. Diese Animation ist wirklich sehr einfach und kann jeder selbst einbauen.

In diesem Video zeige ich euch sogar wie das genau geht

Video

HTML

Damit man Texte animieren kann, muss man natürlich mal zuerst welche erstellen.

1
2
3

<header>
        <h1 id="my-text">Eric-Oliver Mächler</h1>
</header>

JS Trennt Div in einzelne Divs

Ihr könnt natürlich alle Buchstaben einzeln trennen mit CSS und einer eigenen Klasse – aber ich habe dafür eine JS Bibliothek verwendet die sehr einfach ist

1

<script src="https://unpkg.com/split-type"></script>

Wenn man sie eingebaut hat, kann man gleich

JS Buchstaben trennen

Damit die Split-Type Bibliothek funktioniert muss man sie natürlich mit dem Text verknüpfen

1
2
3
4

<script>
/* trennt buchstaben in klasse char */
const myText = new SplitType('#my-text')
<script>

Javascript GSAP

Nun müsst ihr natürlich noch die GSAP Javascript Bibliothek einbauen – ich verwende dafür ein CDN Netzwerk

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"

GSAP Animation

Nun müsst ihr nur noch die GSAP Animation einbinden

1
2
3
4
5
6

gsap.to('.char', {
            y: 0,
            stagger: 0.05,
            delay: 0.2,
            duration: .1
        })

CSS

Weil ja die GSAP den letzten Zustand definiert, muss man den Startzustand der Animation mit CSS definieren

1
2
3

.char {
    transform: translateY(-150px);
    transition: transform 500ms;

Damit man aber den Startpunkt der Animation nicht sehen kann, legt man ein Clip-Pfad darüber den ich mit der Clippy Websiete definiert habe – das ist so wie man eine Maskenbereich definiert bei einem Videoschneidetool wie Final Cut Pro X oder Adobe Premiere Pro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

header {
    display: grid;
    place-content: center;
    height: 100vh;
 
}
 
h1 {
    font-size: 7rem;
    text-transform: uppercase;
    font-family: 'Bebas Neue', cursive;
 
    /*
    quadrat https://bennettfeely.com/clippy/
    */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 
}
 
 
 
}