Skip to content

Incorrect character order during typing animation #399

@alishenriques

Description

@alishenriques

Hey guys! Fisrt of all thanks for the great library!

So... While using the TypeIt library to display long texts, I've noticed an unusual behavior where some characters are reversed during the typing animation. This results in typos in the displayed text, which impacts the accuracy of the output. The issue seems to occur intermittently and is more noticeable with longer strings of text.

Steps to Reproduce

  1. Initialize a TypeIt instance with a long string of text.
  2. Observe the typing animation as it progresses.
  3. Note that certain characters are occasionally swapped or reversed in the final output.

Expected Behavior

The text should appear exactly as provided in the strings option, with no reversed or swapped characters during the typing animation.

Actual Behavior

Characters are occasionally reversed during the typing animation, causing spelling errors in the displayed text.

Thats how I'm using the lib:

<Styles.Answer>
  <TypeIt
    options={{
      speed: 40,
      cursor: true,
      cursorChar: '⬤',
      breakLines: true,
      loop: false,
      waitUntilVisible: true,
      afterComplete: (instance: any) => {
        setShowChildren(true);
        if (onComplete) {
          onComplete(instance);
        }
        instance.destroy();
      },
    }}
    getAfterInit={(instance) => {
      answer.forEach((item, index) => {
        instance.type(item); // Here is the problem. I've tryed instance.type(item, { instant: true }).flush(); like the docs, but didn't work.
        if (index < answer.length - 1) {
          instance.pause(500);
        }
      });
      instance.go();
      return instance;
    }}
  />
</Styles.Answer>

Environment

  • Library Version: ^2.7.7
  • Browser: Chrome (desktop e mobile), Edge.
  • App Framework: React.js

Additional Information

  • This behavior appears to be more frequent with long strings or when the typing speed is set to high (but not necessarily);

Let me know if further details or a demo is required to investigate this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions