Multi-line Typewriter Effect With Blinking Cursor – tply

Preview:

Description:

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>
</div>

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

<div id="tply-destination">
</div>

4. Hide the text on page load.

#tply-source {
  display: none; 
}

5. Activate the typewriter effect.

tply.animate(
  document.getElementById("tply-source"),
  document.getElementById("tply-destination")
);

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

<div id="source">
  <type>Text 1</type>
  <wait>500ms</wait>
  <br>
  <type>Text 2</type>
  <wait>300ms</wait>
  <br>
  <type>Text 3</type>
</div>

7. Repeat the typewriter effect.

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

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

9. Clear all children content.

<clearall></clearall>

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

<delete data-chars="3" 
        data-ignore-whitespace="true">
</delete>

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

tply.animate(
  document.getElementById("tply-source"),
  document.getElementById("tply-destination"),
  { 
    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) {
        element.parentElement.style.backgroundColor = "red";
      }
    ]
});

<type data-type="custom">
  Text To Type Out
</type>