Search code examples
javascripthtmltyped.js

is there anyway to know Typed JS effect is complete?


Hi I am creating a typewriting effect Using Type Js Library and I want to know is there any way I can know the Typed JS effect is completed?

Any kind of help is highly appreciated :)

var typed = new Typed('.typed', {
    stringsElement: '.typed-strings',
  loop:false
  });
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

  <title>Document</title>

</head>

<body>

  
   <div class="typed-strings">
    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
  </div>
  
  <span class="typed"></span>

</body>

</html>


Solution

  • A quick glance at the library's documentation shows that there is an onComplete parameter that takes a function: docs link

    In the onComplete you can set a variable to mark the animation as completed.

    let isEffectComplete = false;
    const typed = new Typed('.typed', {
      stringsElement: '.typed-strings',
      loop:false,
      onComplete: () => { isEffectComplete = true },
    });