Advanced Typewriter Animation Library – TypeFX.js

TypeFX.js is a modern typewriter effect library written in TypeScript that helps you create animations to type, delete, and select text.

It provides a clean, chainable API to build complex text-based animations sequentially without messy callbacks or complex state management.

Features:

• Chainable API: Sequential execution of typing, moving, selecting, and deleting operations through method chaining.
• Advanced cursor control: Precise character-by-character movement with both animated and instant positioning options.
• Text selection simulation: Visual highlighting and manipulation of selected text ranges, complete with background styling.
• Speed randomization: Configurable typing speed variation to simulate human-like typing patterns.
• Framework integration: Built-in support for Vue 3 with template refs and lifecycle integration.
• Zero dependencies: Pure JavaScript implementation without external library requirements.

Use Cases

• Interactive coding tutorials: Demonstrating code editing workflows with realistic cursor movement, text selection, and refactoring sequences.
• Terminal emulators: Creating authentic command-line interfaces that show typing, backspacing, and command correction patterns.
• Product demonstrations: Showcasing text editing features in applications by simulating user interactions with precise timing control.
• Storytelling interfaces: Building narrative experiences where text appears through realistic editing processes rather than linear typing.

How to use it:

1. Install TypeFX.js package with NPM and import it into your project.

# NPM
$ npm install typefxjs

import TypeFX from "typefxjs";

2. For a quick setup, use the CDN link. Just add this script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/typefxjs/dist/typefx.umd.min.js"></script>

3. Create an HTML element to serve as the container for the text animation.

<p id="example"></p>

4. Create a new instance of TypeFX and pass the target element to the constructor. From there, you can chain methods to build your animation sequence. The example here types a sentence, waits, moves the cursor back, selects a word, deletes it, and types a new phrase.

const element = document.querySelector('#example');

new TypeFX(element)
    .type("This is a demo of TypeFX.js.")
    .wait(500)
    .move(-11)
    .wait(300)
    .select(10)
    .wait(400)
    .delete()
    .type("a typewriter effect!");

5. Pass an options object as the second argument to the constructor to customize the behavior:

• speed: Base typing delay in milliseconds per character
• speedRange: Random variation range for natural typing simulation
• caretWidth: CSS width value for the cursor element

new TypeFX(element,{
  speed: 50,
  speedRange: 50,
  caretWidth: "0.05em"
})

6. All chainable API methods.

Text Operations:

• type(text): Inserts characters sequentially at cursor position
• delete(n): Removes n characters before cursor, including any selected text
• clear(): Deletes all text with character-by-character animation
• quickClear(): Instantly removes all content

Cursor Control:

• move(n): Animates cursor movement by n characters (positive right, negative left)
• quickMove(n): Instantly repositions cursor by n characters
• select(n): Animates text selection of n characters from cursor position
• quickSelect(n): Instantly selects n characters without animation

Timing and Flow:

• wait(ms): Pauses execution for specified milliseconds
• speed(ms): Updates typing speed for subsequent operations
• speedRange(ms): Modifies speed randomization range
• then(func): Executes custom function within the chain
• cancel(): Stops all queued operations

7. Integrate it with Vue 3’s composition API:

<template>
  <p ref="content"></p>
</template>
<script setup>
  import { onMounted, useTemplateRef } from 'vue';
  import TypeFX from 'typefxjs';
  const contentEl = useTemplateRef('content');
  onMounted(() => {
    new TypeFX(contentEl.value)
        .type("Vue 3 integration example")
        .wait(500)
        .move(-8)
        .select(8)
        .delete()
        .type("demonstration");
  });
</script>

Alternatives

• Typed.js: The most established typewriter library with detailed documentation and plugin ecosystem.
• Typewriter.js: Focuses on simplicity with a smaller bundle size and straightforward API. This library handles basic typewriter effects well but cannot simulate complex text editing behaviors like selection and cursor movement.
• 10 Best Typewriter Text Animation JavaScript Libraries

FAQs

Q: Can I use HTML tags inside the strings I type?
A: Based on the source code, the .type() method creates text nodes for each character. It doesn’t parse HTML strings.

Q: How do I create a looping animation?
A: The library doesn’t have a built-in .loop() method. However, you can create a loop by wrapping your animation sequence in a function and calling it recursively within a .then() callback at the end of the chain.

Q: What happens if the target element already contains text?
A: TypeFX.js will append its caret to the end of the existing content and start its operations from there. It doesn’t automatically clear the element on initialization. If you want to start with a clean slate, you should either ensure the HTML element is empty or call .quickClear() at the beginning of your chain.

Q: How does TypeFX.js perform with very long text sequences?
A: The library creates individual DOM elements for each character, so performance may degrade with extremely long text (thousands of characters). For large content blocks, consider breaking text into smaller chunks or using the quickClear() method to reset content between sequences.

Q: Can multiple TypeFX instances run simultaneously on the same page?
A: Yes, TypeFX.js supports multiple concurrent instances on different elements. Each instance maintains its own queue and styling, so multiple typewriter effects can run independently without interference.

Q: How do I handle user interactions while TypeFX animations are running?
A: TypeFX.js provides the cancel() method to stop queued operations immediately. You can call this method in response to user clicks or other interactions, then optionally start new sequences based on the user action.

The post Advanced Typewriter Animation Library – TypeFX.js appeared first on CSS Script.