Im doing a website and on the first page, there is my title doing an animation of BaffleJS. What i want to do is wait for my title to finish his animation, then show the other texts, which could appear smoothly. Here's my code for now:

<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);`