Get Started

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 delimiter=", " 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.

delimiter

Type: any

Delimiter to use if multiple sentences are going ot be used.

loop

Type: boolean

Loops the animation.

text

Type: stringDefault: "I'm a typewriter"

Text that should be written.

Slots

inner

Slot (between HTML tag).

Events

spxTypewriterDidLoad

Fires after component has loaded.

Methods

play

Start animation.

stop

Stop animation.