Super Powerful Typewriter / Streaming Animation
This JavaScript library offers user-friendly web text animations, including typewriter effects, streaming effects and other styles, with a focus on performance.
Preview
Install
This project relies on Node.js and npm. Ensure you have them installed locally if not already.
$ npm i create-advanced-typewriter-animationOnce the package is installed, you can import the library using either the import or require approach.
// using ES6 modules
import createAdvancedTypingAnimation from 'create-advanced-typewriter-animation';The UMD build is also accessible
<script src="/node_modules/create-advanced-typewriter-animation/dist/umd/bundle.js"></script>then you can use window.createAdvancedTypingAnimation
Usage Example:
createAdvancedTypingAnimation(document.querySelector('.container'), `
<writing infinity="true">
<cursor />
<typewriter duration='10' mode="1">
a super powerful typing animation plugin, meticulously crafted using native JavaScript. It creates a captivating typewriter effect, infusing your web projects with a refined touch of sophistication.
</typewriter>
</writing>
`)Directive Explanation:
| Directive | Description | Attributes |
|---|---|---|
<writing> |
Specifies the writing block, containing various child elements (e.g., <cursor>, <hideCursor>, <typewriter>, <moveCursor>, <delete>, <mask>, <clear>). |
infinity: Specifies whether the animation should loop infinitely (true or false). |
<cursor> |
Represents the typing cursor. Used inside the <writing> block to denote where typing should begin. |
None |
<hideCursor> |
Hides the typing cursor. Used inside the <writing> block to hide the cursor. |
None |
<typewriter> |
Represents a block of text that is typed out in the animation. | - speed: Typing speed in units per character (higher number means slower typing). - duration: Specifies the total duration of the typing effect (overrides speed if provided). - mode: Typing animation style (0, 1, or 2): - 0: Character by character typing. - 1: Word by word typing. - 2: Sentence by sentence typing. - className: CSS class for the typed text, useful for styling specific parts of the text. |
<moveCursor> |
Moves the cursor a specified number of steps. | - duration: Duration of the cursor movement. - mode: Cursor movement style (0 or 1): - 0: Moves the cursor backward. - 1: Moves the cursor forward. - count: Number of steps to move the cursor. |
<delete> |
Represents a deletion effect where characters are removed one by one. | - duration: Duration of the deletion effect. - count: Number of characters to delete. Note: The <delete> directive only works when the cursor is specified in the previous directive. |
<delay> |
Represents a delay or pause in the animation. | duration: Duration of the delay. |
<mask> |
Represents a mask effect that reveals or hides text in a certain style. | - duration: Duration of the mask effect. - color: Color or gradient for the mask. - mode: Mask style (0, 1, or 2): - 0: Character by character masking. - 1: Word by word masking. - 2: Sentence by sentence masking. |
<clear> |
Clears the contents of the writing block. | None |