Text

The Text element is capable of animating text in different ways.

Possible animations are 'type', 'fill' and 'reveal'.

Settings

mode
caret
speed
delay
eventStart
eventName
stopEvent
infinite
template
classes
caretClasses
realisticTyping
combine
caretWidth
color
caretColor
easing
straightReverse
reverseDuration

mode

Type: String (keyword)


The mode of the animation.

Possible values are: 'type', 'fill' and 'reveal'.

Default: 'type'

caret

Type: Boolean


Whether to show the caret.

Default: true

speed

Type: Number


Speed of the animation in milliseconds.

Default: 60

delay

Type: Number


Delay between animations in milliseconds.

Default: 1000

eventStart

Type: Boolean


Whether to start the animation via an event instead of immediately.

Default: false

eventName

Type: String


The event name used to trigger the animation start.

Default: 'easyTextStart'

stopEvent

Type: String


The event name used to stop the animation.

IMPORTANT: The current animation cycle will always finish before stopping.

Default: 'easyTextStop'

infinite

Type: Boolean


If true, the animation will loop infinitely with playback back and forth.

Default: true

template

Type: String (keywords)


Template and color specification string.

Possible templates: 'one', 'two', ..., 'eight'.

Combine with dash and color e.g. 'five-blue'.

Possible colors: 'dark', 'light', 'blue', 'green', 'red', 'orange', 'pink', 'yellow', 'brown'.

Optional stroke ('dark' or 'light') can be appended when mode is 'fill', e.g. 'five-blue-dark'.

Default: ''

REQUIRED

classes

Type: String


Additional CSS classes to add to the output buffer element.

Default: ''

caretClasses

Type: String


Additional CSS classes to add to the caret element.

Default: ''

realisticTyping

Type: Boolean


Whether to use realistic typing speeds with random variation.

Default: true

combine

Type: Boolean


Whether to combine all text wrappers into a single concatenated text stream.

Default: true

caretWidth

Type: Boolean


Width of the caret as a CSS value (e.g., '1px').

Default: '1px'

color

Type: String


Color used in fill and reveal animations.

Default: '#bbb'

caretColor

Type: String


Color of the caret used in fill and reveal animations.

Default: '#bbb'

easing

Type: String (keyword)


CSS easing function used in fill and reveal animations.

Default: 'linear'

See:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_easing_functions

straightReverse

Type: Boolean


If true, the rotate animation reverses directly back without cycling forward.

Default: true

reverseDuration

Type: Number


The speed of the reverse animation in milliseconds.

If negative, will use the value of 'speed'.

Default: -1