A text task transforms text elements or creates complex text animation.
This plugin has the following built-in text tasks:
text-split - Wraps words or characters with span tags, allowing to later
animate individual words or characters.
typewriter - Creates the typewriter effect by typing individual characters
or words one by one followed by a cursor.
decipher - Generates a random list of texts that gradually reveal the hidden text.
public export type
DevToIXexport type TextTaskName =
/** @see #TextSplitTaskParams */
| 'text-split'
/** @see #TypewriterTaskParams */
| 'typewriter'
/** @see #DecipherTaskParams */
| 'decipher';
public export type
export type TextTaskParams =
| TextSplitTaskParams
| TypewriterTaskParams
| DecipherTaskParams;
public export interface
export interface TextSplitTaskParams extends AnyParams{ }
public property [TextSplitTaskParams]
text?: string;
public property [TextSplitTaskParams]
splitBy?:
| 'char'
| 'word';
public property [TextSplitTaskParams]
realign?: boolean;
If realign is true, it sets the left property of each new element in a way that are align side by side.
Use it if the element position is absolute.
Main purpose is to use with transformations.
Valid only for DOM elements.
public export interface
export interface TypewriterTaskParams extends TextSplitTaskParams{ }
public property [TypewriterTaskParams]
cursor?: boolean;
public property [TypewriterTaskParams]
cursorChar?: string;
public export interface
export interface DecipherTaskParams extends AnyParams{ }
public property [DecipherTaskParams]
upperCharRanges?: [number, number][];
public property [DecipherTaskParams]
lowerCharRanges?: [number, number][];
public property [DecipherTaskParams]
iterations: uint;
public property [DecipherTaskParams]
revealCharIterations?: uint;
public property [DecipherTaskParams]
revealDirection?: RevealDir | string;
public property [DecipherTaskParams]
text: string;