Apply Retro Typewriter Effect To Text – Typey.js

Preview:

Description:

Yet another text animation library that simulates typing or deleting text on the webpage.

With just a few lines of code, you can make text look like it is being typed out in real-time, character by character.

This can be a great way to grab users’ attention and add some flair to headings, captions, or any other text elements.

How to use it:

1. Get started by loading the main script typey.js in the document.

<script src="/dist/typey.min.js"></script>

2. Add the data-typey-options attribute to the text container and config the animation with the following parameters:

• speed: Animation speed. Default: 100.
• typingCharacter: Custom cursor displayed at the end of the text while being typed out. Default: “_”.
• delete: Enable deleting animation. Default: false.
• repeat: Whether to loop the animation. Default: false.
• maximumRepeats: Max number of repeats. Default: null.
• onBeforeRender: Callback function.
• onRenderComplete: Callback function.

<div data-typey-options="{ 'speed': 100 }">
  <p>Text Here.</p>
</div>