Animated typewriter effect based on:
https://github.com/tameemsafi/typewriterjs

 Sample App:
https://visualneo.com/tutorials/neotypewriter/

Description

The neoTypeWriter plugin for VisualNEO Web enables animated typewriter effects, perfect for creating engaging and dynamic text displays in applications. Based on typewriterjs, this plugin allows text to appear as if typed, with customizable delays, looping, and pausing functions. Here’s an overview of its functionalities and usage:

Initializing the Typewriter Effect

The neoTypeWriterInitialize command sets up the typewriter animation within a specified container, allowing control over typing speed, delete speed, and looping.

    • Command: neoTypeWriterInitialize
    • Syntax: neoTypeWriterInitialize "objId" writeDelay deleteDelay theLoop theText
      • objId: Container ID where the typewriter effect appears.
      • writeDelay: Delay between each character typed (1-1000 ms).
      • deleteDelay: Delay for deleting each character (1-1000 ms).
      • theLoop: If true, loops the animation.
      • theText: Text to animate. Each new line in the text represents a new sequence.

Example:

neoTypeWriterInitialize "Container1" 100 50 true "Welcome to our app!\nEnjoy the experience!"

This configuration types out "Welcome to our app!" and then deletes it, looping the sequence​.

Controlling the Typewriter Effect

The plugin provides additional commands for pausing, resuming, and starting the animation.

    • neoTypeWriterPause: Pauses the typewriter animation.
      • Syntax: neoTypeWriterPause "objId"
    • neoTypeWriterPlay: Resumes or starts the typewriter animation.
      • Syntax: neoTypeWriterPlay "objId"

Example:

neoTypeWriterPause "textContainer"
neoTypeWriterPlay "textContainer"

These commands allow interactive control over the animation, making it ideal for user-driven applications​.

Practical Applications

The neoTypeWriter plugin is ideal for:

    • Welcome Messages: Animated greetings on landing pages.
    • Feature Highlights: Sequentially introducing app features.
    • Interactive Storytelling: Displaying narrative text in an engaging, paced format.

With customizable speed and looping options, neoTypeWriter enhances user engagement, adding a dynamic, interactive text animation to VisualNEO Web applications.

neoTypeWriterInitialize

Purpose:

Add a TypeWriter effect animated text

Category:

neoTypeWriter

Syntax:

neoTypeWriterInitialize "objId" writeDelay deleteDelay theLoop theText

 

objId

Select a Container object

writeDelay

Write delay (number 1 - 1000)

deleteDelay

Delete delay (number 1 - 1000)

theLoop

Loop animation?

theText

HTML Text (Each new line is a sequence)

 

neoTypeWriterPause

Purpose:

Stop TypeWriter

Category:

neoTypeWriter

Syntax:

neoTypeWriterPause "objId"

 

objId

Select a Container object

 

neoTypeWriterPlay

Purpose:

Start TypeWriter

Category:

neoTypeWriter

Syntax:

neoTypeWriterPlay "objId"

 

objId

Select a Container object

Created with the Personal Edition of HelpNDoc: Keep Your PDFs Safe from Unauthorized Access with These Security Measures