twjs

Typewriter

A better typewritter effect. Texts and elements appear one by one.

Install

• In-browser installization

<script src="/path/to/twjs.min.js"></script>

• Install with yarn or npm

npm install twjs

Then,

import Typewriter from 'twjs';

or

var Typewriter = require('twjs');

Usage

• Initiation

const config = {
  interval: 30,                       // * Time interval for the animation, 30
                                      // milliseconds by default
  skip: '.MathJax',                   // * Specify a selector to skip. We let 
                                      // the formulas shows entirely
  hook: function(operation, queue) {  // * For advanced usage of the library;
    return true;                      // return false to skip default process of
  }                                   // current operation
};
const targetElement = document.getElementById('element-to-animate');
let tw = new Typewriter(targetElement, config);

config is optional.

• Start the animation

tw.start();

• Pause the animation

tw.pause();

• Resume the animation

tw.resume(); // Currently it is just an alias of `tw.start`

• Reset the animation

tw = tw.reset();

Example usage can be found here.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Feel free to pull requests. The bug fixes are left as exercises for the users.

Acknowledgments

As a request from @haoyun.