> console-writer_

Creates console text typing animation from any element.

Installation

1. Download JS library.

   > Download js file from git.
   > Add <script src="/[YOUR_PATH]/console-writer" />.
   > # OR #
   > Add <script src="https://raw.githubusercontent.com/liavbarsheshet/console-writer/main/console-writer.min.js">
   

2. Add keyframe to your stylesheet

   @keyframes console-writer-blink-animation {
     0% {
       opacity: 0;
     }
     49% {
       opacity: 0;
     }
     50% {
       opacity: 1;
     }
   }

Usage

Create Element

<div id="demo-element">Hello World!</div>

ConsoleWriter(element,[options],[callback]){...}

Creates console writer animation.

element {Element|string} - Selector or an element. [options] {object} - Animation options. [options.speed] {number} - Typing speed in milliseconds. [options.delay] {number} - Animation delay in milliseconds.

Start Animation([callback]){...}

Starts a console writer animation

[callback] {function} - Callback when animation ends.

const element = document.querySelector(`#demo-element`);
const animation = ConsoleWriter(element, { speed: 500, delay: 0 });
animation.start();

// OR

const animation = ConsoleWriter(`#demo-element`, { speed: 500, delay: 0 });
animation.start();

// OR

ConsoleWriter(`#demo-element`, { speed: 500, delay: 0 }).start();

Finish Animation

Removes the blinking "_" from text. ==Can be used to make multi rows animation==.

const element = document.querySelector(`#demo-element`);
const animation = ConsoleWriter(element, { speed: 500, delay: 0 });
animation.start(() => {
  // Animation was completed
  animation.finish();
  // Start another line animation
});

Start Async

Promises animation chain.

const element = document.querySelector(`#demo-element`);
const animation = ConsoleWriter(element, { speed: 500, delay: 0 });
await animation.startAsync()
.then(() => {
  animation.finish();
})
.then()...

Author

Liav Barsheshet, LBDevelopments

License

MIT