<typing-effect> element

A custom element that shows text as if it were being typed

Installation

$ npm install @github/typing-effect-element

Usage

import'@github/typing-effect-element'

<typing-effectdata-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'><spandata-target="typing-effect.content"></span><spandata-target="typing-effect.cursor">|</span></typing-effect>

Accessibility

This component detects whether prefers-reduced-motion is set on the window:

window.matchMedia('(prefers-reduced-motion)').matches===true

If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.