Typewriter

Available as: Web ComponentShortcodeOxygen Element

Animates text like it is being written on a typewriter.

<style> * { font-family: helvetica, sans-serif; } </style> <spx-typewriter text="['First Message', 'Second Message']" auto-start loop> </spx-typewriter>
<style> * { font-family: helvetica, sans-serif; } </style> <spx-typewriter text="This text is being typed like on a typewriter :-)" auto-start> </spx-typewriter>

Properties

auto-start

Type: booleanDefault: true

Automatically starts writing.

delay

Type: anyDefault: 'natural'

Writing delay in ms. Also accepts 'natural' value.

delete-speed

Type: anyDefault: 'natural'

Delete delay in ms. Also accepts 'natural' value.

display

Type: stringDefault: 'block'CSS variable: --spx-typewriter-display

Component display property.

loop

Type: boolean

Loops the animation.

text

Type: stringDefault: "I'm a typewriter"

Text that should be written.

Events

spxTypewriterDidLoad

Fires after component has loaded.

Methods

play

Start animation.

stop

Stop animation.