Heute zeige ich euch wie ihr mit Javascript eine coole Text Animation erstellen könnt und dafür müsst ihr nicht mal GSAP oder sonst was installieren, sondern es ist reines Javascript.

Jetzt wisst ihr also wie ihr so einen coolen Text Effekt ohne Plugin, Bilbliothek oä erstellen könnt

Video

HTML

<h1 id="textfeld">Starting...</h1>

CSS

body {
    background-color: darksalmon;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

Javascript

const textfeld = document.getElementById('textfeld');

const text = 'Herzlich Willkommen';
let buchstabe = 1;
let speed = 1000;

writeText()

function writeText() {
    textfeld.innerText = text.slice(0, buchstabe);

    buchstabe++
    if(buchstabe > text.length) {
        buchstabe = 1
    }
    
 

    setTimeout(writeText, speed);
}