Natural Typing Animations In JavaScript – Typecadence

Typecadence is a JavaScript library that provides an animated typing effect that simulates natural human typing, including speed variations and mistakes.

How to use it:

1. Download and include the Typecadence library on the page.

<script src="/dist/typecadence.js"></script>

2. Apply the typing effect to any HTML element with the class typecadence.

<span class="typecadence">
  ...
</span>

3. The start of the typing animation can be delayed using the data-typecadence-delay attribute. The value is in milliseconds.

<span class="typecadence" data-typecadence-delay="3000">
  This is Typecadence with a start delay.
</span>

4. The minimum and maximum typing speed can be set using the data-typecadence-speed attribute. The value is a range in milliseconds separated by a comma.

<span class="typecadence" data-typecadence-speed="200,1400">
  This is Typecadence with a custom speed.
</span>

5. The caret can be enabled or disabled using the data-typecadence-caret attribute. The value is a boolean.

<span class="typecadence" data-typecadence-caret="false">
  This is Typecadence with caret.
</span>

6. Simulate typing mistakes.

<span class="typecadence" data-typecadence-mistakes="25">
  This is Typecadence with a 25% chance of a mistake being made with each keystroke.
</span>

<span class="typecadence" data-typecadence-mistakes-present="3">
  This is Typecadence with a maximum of three mistakes present before backspacing to correct the earliest mistake.
</span>

<span class="typecadence" data-typecadence-mistakes-keyboard="azerty">
  This is Typecadence with a AZERTY keyboard layout.
</span>

Changelog:

v1.3.0 (03/06/2023)

• HTML tag preservation during animation — inline elements (<b>, <em>, <span>, <a>, etc.) and void elements (<br>) are maintained throughout typing
• Caret color is pinned to the root element’s computed color to prevent inheritance from nested colored spans

v1.0.8 (07/28/2023)

• Bugfix

v1.0.6 (07/13/2023)

• Allow for mistakes to be set at zero

v1.0.3 (07/08/2023)

• Update

v1.0.0 (07/03/2023)

• Use universal module definition

The post Natural Typing Animations In JavaScript – Typecadence appeared first on CSS Script.