cm-typing-effect

Function: startTyping

startTyping creates a typing animation in a target element and returns a promise that resolves when the animation is complete.

To specify the target, you can pass its ID or the element itself.

General Usage Example:

import { startTyping } from "cm-typing-effect"

startTyping("elementId")

More Customized Example (with React):

export function App() {

    const animate = async () => {
        await startTyping("title", {
            caretBlinkingSpeed: 2,
            animationTime: 2000,
            startDelay: 5000,
            endDelay: 2000,
            realisticTyping: true
        })
        await startTyping("description", {
            caretBlinkingSpeed: 2,
            animationTime: 2000,
            realisticTyping: true,
            keepCaretBlinkingAfterEnd: true
        })
    }

    // Triggering right after initial render
    // (but you can trigger any moment after that)
    useEffect(() => { animate() }, [])

    return (
        <>
            <h1
                id="title"
                style={{ visibility: "hidden" }}
            >
                Hello Everynyan!
            </h1>
            <p
                id="description"
                style={{ visibility: "hidden" }}
            >
                How are you? Fine, thank you!
            </p>
        </>
    )
}

Tips

- To keep the target element hidden before the animation, use visibility: hidden on them.

- You can customize even more using the css classes: caret-cm-typing-effect, text-cm-typing-effect, wrapper-cm-typing-effect.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | startDelay | number | 0 | Time in milliseconds before typing animation starts. Caret will be blinking during this time. | | endDelay | number | 0 | Time in milliseconds before typing animation ends. Caret will be blinking during this time. | | realisticTyping | boolean | false | When true, caret blinks only when typing stops. | | keepCaretBlinkingAfterEnd | boolean | false | Keep the caret blinking after typing ends. | | animationTime | number | 1000 | Total duration (in ms) for typing animation. | | caret | string | \| | Custom character for the caret. | | caretBlinkingSpeed | number | 1.6 | Speed of the caret blinking in blinks per second. | | caretTakeSpace | boolean | false | Make caret take space of the target element. | | caretOffset | number | 0 | Horizontal caret offset in px. Can't be used with caretTakeSpace: true. | | eraseMode | boolean | false | Make an erase animation. |

Requirements (current version)

• The target element must have ONLY text content (no tags).
• Text content should use a monospaced font.
• No Full-Width characters are supported.