Estoy haciendo un sitio web y en la primera página está mi título haciendo una animación de BaffleJS. Lo que quiero hacer es esperar a que mi título termine su animación, luego mostrar los otros textos, que podrían aparecer sin problemas. Aquí está mi código por ahora:

 <div class="container"> <div class="data">Thieves' Haven</div> <br> <img style=" position:absolute; top:55%; left:40%; width:20%; height:25% " SRC="https://media4.giphy.com/media/WrUOlEoYhJ6wog4hCJ/giphy.gif?cid=ecf05e47pe9z2ry9hjo6v6xm5ivm0ypburfp2yzgmu1amnfl&rid=giphy.gif&ct=g"> <div class='data2'> Welcome to Thieves' Haven, you've been jailed for theft, betray and mutiny, you are going to prove yourself to hope win your liberty. <br> <br> TYou will need to answer correctly at all those test to get out. Good luck. <br> <br> You'll be sent to the Island of Thieves</div> </div> <script type="text/javascript"> const text = baffle(".data"); text.set({ characters : '█▓█$ ▒░^/▒░ █*░$▒▓/ █<▒▒ >▓▒▓/█ ░█^ù▒/ ▒*▓░ █<░▒ ▓/░>', speed: 120 }); text.start(); text.reveal(4000);`