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/typed.js@2.0.12"></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>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 },
});