CODEWITHSUNDEEP
javascriptjqueryhtml
Juan Pablo Contreras
Juan Pablo Contreras

Reputation: 5

Looping a script

I'm using a really cool script, Typer, to simulate a typewriter effect, but, is not included on its methods to loop the animation once it ends. Does anybody knows how it can be done?

typer('#rotating')
.cursor({block:true,blink:'hard',color:'#EB312A'})
.line('some line')
.pause(5000)
.back('all')
.continue('Other line');

Upvotes: 0

Views: 72

Answers (1)

sjahan
sjahan

Reputation: 5960

You can use setInterval like this: 

setInterval(function(){ 
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
}, 10000);

Where 10000 is the number of milliseconds between two calls of the passed in function (of course, you will have to specify it according to the duration of your animation). setInterval is a native function that allows you to call a function periodically.

Hoping this will help you ;)

EDIT

Typer creates a new div inside your target #rotating when it is started. That's why when you start it multiple times, you get duplicate content. To prevent that, just erase the content of the target div before restarting typer, like this: 

setInterval(function(){ 
  document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating.
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
}, 10000);

EDIT 2

To make it start directly, simple enough: 

var startTyper = function(){ 
  document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating.
  typer('#rotating')
  .cursor({block:true,blink:'hard',color:'#EB312A'})
  .line('some line')
  .pause(5000)
  .back('all')
  .continue('Other line');
};
startTyper();
setInterval(startTyper, 10000);

The only thing left to you is to adjust 10000 to the duration of your animation!

Upvotes: 2

Related Questions