Multi-line Typewriter Effect With Blinking Cursor – tply

Category: Animation , Javascript , Text | February 24, 2020
Views Total:3,459 views
Official Page:Go to website
Last Update:February 24, 2020


Multi-line Typewriter Effect With Blinking Cursor – tply


tply is a lightweight yet configurable text animation plugin to make your text appear as if it is being typed on a typewriter or terminal, with a blinking cursor animated with CSS3.

How To Use it:

1. Download and load the tply library on the HTML page.

<script src="/path/to/dist/tply.js"></script>

2. Wrap the text into the <type> element:

<div id="tply-source">
  <type>Text To Type Out</type>

3. Create a container on which you want to render the typewriter effect.

<div id="tply-destination">

4. Hide the text on page load.

#tply-source {
  display: none; 

5. Activate the typewriter effect.


6. Add a delay to the typewriter effect if you have multi-line text to type out.

<div id="source">
  <type>Text 1</type>
  <type>Text 2</type>
  <type>Text 3</type>

7. Repeat the typewriter effect.

<repeat data-repeat="3">
  <type>This will repeat three times!</type>
<repeat data-repeat="infinite">
  <type>This will repeat forever!</type>

8. Clear the parent content. Useful for repeat mode as you see above.

9. Clear all children content.


10. Sometimes you might need a deleting effect to simulate someone removing text on the page.

<delete data-chars="3" 

11. Possible configurations. The example here shows how to animate your text word by word instead.

    types: [
      name: "custom",
      properties: {
        "data-char-interval": "0ms",
        "data-comma-interval": "0ms",
        "data-period-interval": "0ms",
        "data-word-interval": "100ms"
      styleClasses: "custom",
      style: "font-family: monospace;"
    processing: [
      tag: "div",
      pre: function(element) {
        element.innerText += " haha"
      post: function(element) { = "red";
<type data-type="custom">
  Text To Type Out

You Might Be Interested In:

Leave a Reply