Comment animer un titre dans WordPress avec typed.js ?

Aujourd'hui je vous partage une méthode pour animer un titre dans WordPress (et plus particulièrement dans Gutenberg) sans plugin grâce à la librairie javascript typed.js.

Code à copier / coller

Le script qui importe typed.js, à placer avant le texte à animer :

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Le texte à animer en HTML :

<div id="typed-strings">
  <p>Des pâtisseries <strong>artisanales</strong>.</p>
  <p>Des pâtisseries faites avec des <strong>ingrédients biologiques</strong>.</p>
  <p>Des pâtisseries préparées <strong>avec amour</strong>.</p>
</div>
<h2><span id="typed"></span></h2>

Et le script qui initialise l'animation du texte, à placer après le texte à animer :

<script>
var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 70,
    backSpeed: 35,
    loop:true,
  });
</script>