Как сделать анимированный заголовок на сайте

Когда нужно сделать анимированный текст на сайте …

HTML :

<header class="site-header__wrapper">  
  <div class="site-header">      
    <h1 class="site-header__title">Landing Page Design</h1>
    <span id="typed-text"></span>
  </div>
</header>

 

Стиль

body{
    font: 16px 'Roboto','Comforta', sans-serif;
}
.site-header__wrapper {
    background: #232f3b;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 15px;
    justify-content: center;
}
.site-header{
    width: 100%;
    max-width: 600px;
    min-height: 200px;
    text-align: center;
    color: #eee;
}
.site-header__title {
    font-size: 2rem;
}
.site-header__description {
    font-size: 1.125rem;
}
Добавляем в футер вот это
<script src=»js/typed.min.js»></script>
Вот этот скрипт
<script>
var typed2 = new Typed('#typed-text', {
strings: ['Landing Page Creation', 'Domain and Hosting for free', 'SEO for your website'],
typeSpeed: 30,
backSpeed: 20,
loop: true
});
</script>
Еще другие вариации