Typing Animation

Typing was first added in version 2.24.0 but in current form, with all updates and fixes, you should use at least 2.28.0 to use all the features. In version 2.29.0 animation will be added to exec function.

Higher-level API

Prompt animation

term.set_prompt("name: ", { typing: true, delay: 200 });

echo animation

term.echo("Hello", { typing: true, delay: 200 });

exec animation

Since version 2.29.0 exec also supports animation, it works similar to enter using low-level API but here it will also invoke the command, after the animation finishes.

term.exec("Hello", { typing: true, delay: 200 });

All those functions return a Promise (jQuery Deferred) that resolves when animation ends.

Low-level API

Low-level API is single method terminal::typing:

term.typing(<type>, <delay>, <string>, options);

• terminal::typing returns a promise that resolves when the animation ends.
• there is only one option, finalize
• type is one of the strings: 'prompt', 'echo' or 'enter'.
• prompt animation as the name suggests is an animation of the prompt and at the end, the prompt is set to the given string.
• echo animation as the name suggests animate the string that is echo into the terminal.
• enter animation is an animation of entering the command and pressing enter, it uses the current prompt as a prefix after the animation starts. Enter animation doesn't have a higher-level counterpart.

Disabling interactive mode

By default, if you run single animation it will display the key down event (that is base for all interactivity). But if you do a longer animation sequence (e.g. using delay in between animations) you should disable key events yourself. The easiest way is to use this pattern:

let animation;
const term = $('body').terminal(function(command) {
}, {
    keydown: () => animation ? false : undefined
});

When the animation starts set:

animation = true;

when the animation ends set:

animation = false

This will ensure that you will not end up with a broken state when animation and interactive mode (like echo or prompt that is used internally for animations) overlap on each other.

To see examples of typing animation see demos:

• Matrix: Trinity nmap sequence animation
• Matrix: follow white rabbit animation