is there anyway to know Typed JS effect is complete?-CodePudding

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 >
    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
  </div>
  
  <span ></span>

</body>

</html>

CodePudding user response：

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 },
});