Typer.js fixed order of values being typed

Design help Custom code
#1

Read only:
https://preview.webflow.com/preview/typing-5381a9-4fa6430f99b003157fc93e31?utm_source=typing-5381a9-4fa6430f99b003157fc93e31&preview=f9e311ec48a24cbb550c9c21a3ddc335&mode=preview

Published link:
https://typing-5381a9-4fa6430f99b003157fc93e31.webflow.io/

Hi I’m using this plugin to create a typing effect on my site:
http://webflow-typer-demo.webflow.io/

I’m trying to make the text be typed out in the following order when the page loads:
Illustrators, Designers, Developers

However on page load the order keeps being randomised, for example sometimes it’s
Designers, Illustrators, Developers

Is anyone able to help me fix the ordering so it’s the same order every time the page loads.

I have already tried including the following in the header code but it isn’t working:
$.typer.options.typerOrder = ‘sequential’;

Thanks,

James

#2

No need for all of your extra code.

Use this:

<script>
$('[data-typer-targets]').typer({
  highlightSpeed    : 20,
  typeSpeed         : 100,
  clearDelay        : 100,
  typeDelay         : 200,
  clearOnHighlight  : true,
  typerDataAttr     : 'data-typer-targets',
  typerInterval     : 2000
});
</script>

And type the first word inside webflow (Maybe less buggy like this):
image

demo:
https://test-c0d8d3.webflow.io/

And this is not typer.js but jquery-typer-js:

jquery-typer-js is old library (Last commit --> 2014) ==> maybe use this libary (8K+ github starts):

#3

Thanks that’s much neater, however, this hasn’t fixed the ordering issue.

On page load the first word remains but the ones following still appear in different orders.

Thanks,

James

#4

Try to clear cache… My example works fine. Remove this lines and try “my” code above

<script>
/*
jQuery(document).ready(function($){
        $('.typer1').typeTo("Typing");
        $('[data-typer-targets]').typer();
		$.typer.options.typerOrder = 'sequential';
        $.typer.options.initialDelay = 0;
        $.typer.options.highlightColor = 'rgba(187,213,251,1)';
		$.typer.options.textColor = 'rgba(9,37,87,1)';
  
    });
*/
$('[data-typer-targets]').typer({
  highlightSpeed    : 20,
  typeSpeed         : 100,
  clearDelay        : 100,
  typeDelay         : 200,
  clearOnHighlight  : true,
  typerDataAttr     : 'data-typer-targets',
  typerInterval     : 2000
});
</script>
1 Like