Description

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.

 

API

TextTaskName

public export type

export type TextTaskName =
    /** @see #TextSplitTaskParams */
    | 'text-split'
    /** @see #TypewriterTaskParams */
    | 'typewriter'
    /** @see #DecipherTaskParams */
    | 'decipher';

TextTaskParams

public export type

export type TextTaskParams =
    | TextSplitTaskParams
    | TypewriterTaskParams
    | DecipherTaskParams;
 

TextSplitTaskParams

public export interface

export interface TextSplitTaskParams extends AnyParams{ }

TextSplitTaskParams.text

public property [TextSplitTaskParams]

text?: string;

TextSplitTaskParams.splitBy

public property [TextSplitTaskParams]

splitBy?:
    | 'char'
    | 'word';

TextSplitTaskParams.realign

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.

 

TypewriterTaskParams

public export interface

export interface TypewriterTaskParams extends TextSplitTaskParams{ }

TypewriterTaskParams.cursor

public property [TypewriterTaskParams]

cursor?: boolean;

TypewriterTaskParams.cursorChar

public property [TypewriterTaskParams]

cursorChar?: string;
 

DecipherTaskParams

public export interface

export interface DecipherTaskParams extends AnyParams{ }

DecipherTaskParams.upperCharRanges

public property [DecipherTaskParams]

upperCharRanges?: [number, number][];

DecipherTaskParams.lowerCharRanges

public property [DecipherTaskParams]

lowerCharRanges?: [number, number][];

DecipherTaskParams.iterations

public property [DecipherTaskParams]

iterations: uint;

DecipherTaskParams.revealCharIterations

public property [DecipherTaskParams]

revealCharIterations?: uint;

DecipherTaskParams.revealDirection

public property [DecipherTaskParams]

revealDirection?: RevealDir | string;

DecipherTaskParams.text

public property [DecipherTaskParams]

text: string;