Odtnhj

I am using TypeIt.js to type a series of strings – https://typeitjs.com/docs/

There are a few features that I am trying to incorporate.
TypeIt.js allows for running a function after each letter is typed with 'afterStep()'. In the code below you will see that after each step there is a function being called which fits the texts inside the container by recalculation.

I want this typing function to run only when it is in view so I included an instance.freeze() and instance.unfreeze() with a function that checks when the element is in view or not.

This all works but the trouble I am having and would like help on is that when the instance is frozen, the next letter in the string is typed out and doesn't run the function ( window.initVarToWidth() ) inside afterStep...this causes the letter to flow out of it's container.

Is it possible to initiate instance.freeze() only after the function inside afterStep() is completed?

var instance = new TypeIt('#type', 
 strings: ["string1","string2"],
 breakLines: false,
 speed: 500,
 loop: true,

 afterStep: function(step, queue, instance) 
 //-- Execute your code here.
 window.initVarToWidth();
 ,
);




function checkIfInView()
 var docViewTop = $(window).scrollTop();
 var docViewBottom = docViewTop + $(window).height();
 var elemTop = $('#type').offset().top;
 var elemBottom = elemTop + $('#type').height();

 if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) 
 instance.unfreeze();
 , 1000);
 console.log('in view');
 
 else 
 setTimeout(() => 
 instance.freeze();
 , 5000);
 console.log('not in view');
 
 }