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
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):

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):
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
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