• •

svelte-typed-js

A Svelte.js integration for Typed.js.

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Checkout the offical project here.

Demo: https://svelte.dev/repl/823ca24caab143a6896f22fb853a83d0?version=3

Table of contents

• Installation
• Usage

Installation

npm install --save svelte-typed-js

Usage

Minimal setup:

import SvelteTypedJs from 'svelte-typed-js'

<SvelteTypedJs strings={['First text', 'Second Text']} loop=true>
	<h2 class="typing"></h2>
</SvelteTypedJs>

The typing class also allows you to just animate certain parts of a string:

<SvelteTypedJs :strings="['Melih', 'Altintas']">
  <h1>Hey <span class="typing"></span></h1>
</SvelteTypedJs>

Properties

You can make use of the following properties in order to customize your typing expirience:

| Property | Type | Description
|----------------------|---------|---------------------------------------------------------------------- | strings | Array | strings to be typed
| stringsElement | String | ID of element containing string children
| typeSpeed | Number | type speed in milliseconds
| startDelay | Number | time before typing starts in milliseconds
| backSpeed | Number | backspacing speed in milliseconds
| smartBackspace | Boolean | only backspace what doesn't match the previous string
| shuffle | Boolean | shuffle the strings
| backDelay | Number | time before backspacing in milliseconds
| fadeOut | Boolean | Fade out instead of backspace
| fadeOutClass | String | css class for fade animation
| fadeOutDelay | Number | fade out delay in milliseconds
| loop | Boolean | loop strings
| loopCount | Number | amount of loops
| showCursor | Boolean | show cursor
| cursorChar | String | character for cursor
| autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML
| attr | String | attribute for typing Ex: input placeholder, value, or just HTML text
| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input
| contentType | String | 'html' or 'null' for plaintext

License

MIT