Typing and Erasing Animation CSS Component | typewritten-text

<typewritten-text> element causes a typewritten effect on the selected part of the text that applies an accessible and configurable type effect to the inline text.

typing animation loop, typewriter effect, typing and erasing animation css, spring typing animation, typewriter effect js, multiline typewriter effect

Accessibility

This custom item was created with accessibility in mind!

  • A typed text element always represents its textual content regardless of visibility. Screen readers must read the entire text.
  • The textual content can be copied and pasted regardless of visibility.
  • Blinking cursor movement is disabled for people who prefer less movement.

How to make use of it:

1. Install and import the script component.

# NPM
$ npm i @auroratide/typewritten-text --save
import '@auroratide/typewritten-text/lib/style.css'
import '@auroratide/typewritten-text/lib/define.js'

2. Or load the necessary stylesheet and javascript directly into the document.

<link rel="stylesheet" href="/lib/style.css" />
<script type="module" src="/lib/define.js"></script>

3. Wrap the text in the <typewritten-text> custom element as follows:

<typewritten-text>Latest Free JavaScript & jQuery Plugins</typewritten-text>

4. Determine if you want to repeat the typing animation.

<typewritten-text repeat>Latest Free JavaScript & jQuery Plugins</typewritten-text>

5. Set the number of milliseconds between each letter.

<typewritten-text letter-interval="500">Latest Free JavaScript & jQuery Plugins</typewritten-text>

6. Set the time to wait before repeating the animation as you type.

<typewritten-text repeat phrase-interval="5000">Latest Free JavaScript & jQuery Plugins</typewritten-text>

7. Decide if you want to pause the type movement until it is called by JavaScript.

<typewritten-text paused>Latest Free JavaScript & jQuery Plugins</typewritten-text>

8. API methods.

const element = document.querySelector('typewritten-text');

// start
element.start();

// pause
element.pause() 

// type the next character
element.typeNext()

// remove one character
element.backspace()

// run one frame of the typing animation
element.tick() 

// run one frame of the animation regardless of paused state
element.forceTick()

// reverse the direction of the animation
element.reverse() Reverse the direction of the animation

// reset
element.reset()

9. Properties.

element.repeat
element.paused
element.letterInterval
element.phraseInterval

10. Events.

element.addEventListener("typewritten-text:started", function(){
  // do something
});

element.addEventListener("typewritten-text:paused", function(){
  // do something
});

element.addEventListener("typewritten-text:nextchar", function(){
  // do something
});

element.addEventListener("typewritten-text:prevchar", function(){
  // do something
});

element.addEventListener("typewritten-text:phrasetyped", function(){
  // do something
});

element.addEventListener("typewritten-text:phraseremoved", function(){
  // do something
});

All Attributes

AttributeDefaultDescription
repeatWhether the text should type itself repeatedly on a loop
letter-interval100Time between each letter in milliseconds
phrase-interval1000Time between completion and restart during a repeat loop in milliseconds
pausedWhether the animation should start paused

Cursor

The blinking cursor can be customized with either CSS variables or directly via selectors.

VariableDefaultDescription
--typewritten-text_cursor-width0.125emHow wide the cursor is
--typewritten-text_cursor-stylesolidWhether the cursor is solid, dashed, dotted, etc; can be any border-style value
--typewritten-text_cursor-colorcurrentColorColor of the cursor
--typewriten-text_cursor-interval700msThe duration of the blink animation

Javascript API

You can use the following methods:

MethodDescription
start()Start the animation cycle if it is currently paused
pause()Pause the animation cycle if it is currently running
typeNext()Manually type the next character
backspace()Manually remove one character
tick()Run one frame of the animation; only works if not paused
forceTick()Run one frame of the animation regardless of paused state
reverse()Reverse the direction of the animation
reset()Completely resets the element and animation; may be useful if the content within the element is dynamic

Events

The typewritten-text element dispatches the following events:

NameWhen Triggered
typewritten-text:nextcharAnytime a character is typed into view
typewritten-text:prevcharAnytime a character is removed from view
typewritten-text:phrasetypedWhen the full phrase becomes fully typed
typewritten-text:phraseremovedWhen the full phrase becomes untyped
typewritten-text:startedWhen the animation is started
typewritten-text:pausedWhen the animation is paused

Inline Typing Animation Component, typewriter effect Plugin/Github


See Demo And Download

Official Website(Auroratide): Click Here

This superior jQuery/javascript plugin is developed by Auroratide. For extra Advanced Usages, please go to the official website.

Leave a Comment