javascriptで最初は非表示にしたい

https://tobiasahlin.com/moving-letters/#11

上記サイトを参考にそのままコードをコピペして動いてはいるのですが、初めに文字が全て表示された後に文字が消え、その後フェードイベントが始まります。
初めから文字を非表示にたままフェードインしてきてほしいのですが、どうすればよいのでしょうか。

HTML

1<div class="txtbox"> 2<div class="toptxt1"> 3 <span class="text-wrapper"> 4 <span class="line line1"></span> 5 <span class="letters">テキストアニメーション</span> 6 </span> 7</div> 8</div>

CSS

1 .toptxt1 {2 font-weight: 700;3 font-size: 3.5em;4 font-size:3.5vmax;5 font-weight: bold;6}7 8 .toptxt1 .text-wrapper {9 position: relative;10 display: inline-block;11 padding-top: 0.1em;12 padding-right: 0.05em;13 padding-bottom: 0.15em;14 }15 16 .toptxt1 .line {17 opacity: 0;18 position: absolute;19 left: 0;20 height: 100%;21 width: 3px;22 background-color: black;23 transform-origin: 0 50%;24 }25 26 .toptxt1 .line1 { 27 top: 0; 28 left: 0;29 }30 31 .toptxt1 .letter {32 display: inline-block;33 line-height: 1em;34 }35

JavaScript

1var textWrapper = document.querySelector('.toptxt1 .letters');2textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");3 4anime.timeline({loop: false})5 .add({6 targets: '.toptxt1 .line',7 scaleY: [0,1],8 opacity: [0.5,1],9 easing: "easeOutExpo",10 duration: 70011 })12 .add({13 targets: '.toptxt1 .line',14 translateX: [0, document.querySelector('.toptxt1 .letters').getBoundingClientRect().width + 10],15 easing: "easeOutExpo",16 duration: 700,17 delay: 10018 }).add({19 targets: '.toptxt1 .letter',20 opacity: [0,1],21 easing: "easeOutExpo",22 duration: 600,23 offset: '-=775',24 delay: (el, i) => 34 * (i+1)25 }).add({26 targets: '.toptxt1',27 opacity:1,28 duration: 1000,29 easing: "easeOutExpo",30 delay: 100031 });32

footer.php