mukkoo/svelte-typewriter

A simple and reusable typewriter effect for your Svelte applications

svelte-typewriter

A simple and reusable typewriter effect for your Svelte applications

DEMO

Summary

• Summary
• Installation
• Usage
• Props
  • Settings
  • Modes
  • Event listeners
  • Child attributes
• Used by
• FAQs
  • UMD and IIFE output formats are not supported for code-splitting builds
• Contributing

Installation

# yarn
yarn add -D svelte-typewriter

# npm
npm i -D svelte-typewriter

Usage

You need to import the Svelte component, and wrap your elements with the <Typewriter> component

<script>
    import Typewriter from 'svelte-typewriter'
</script>

<Typewriter>
	<h1>Testing the typewriter effect</h1>
	<h2>The typewriter effect cascades by default</h2>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

Props

The <Typewriter> component can receive props that allows to manipulate the behavior of the resulting animation, these props are divided into 4 groups

• Settings: general animation properties
• Modes: different styles of animation
• Event listeners: functions executed based on the condition of a trigger
• Child attributes: child elements animation properties

Settings

Prop	Type	Description	Default
interval	number or array	The interval in milliseconds between each letter, you can also pass a array of distinct intervals to mimic human typing	30	DEMO
cursor	boolean or string	Enables/disables the terminal cursor on the Typewriter animation, and also, allows you to pass any valid color name, hex code, rgb/rgba valid values to change the cursor color	true	DEMO
delay	number	The interval in milliseconds before the animation starts	0	DEMO
scrambleSlowdown	boolean	Enables/disables the slowdown effect right before the scramble animation ends (only works in scramble mode)	true if on scramble mode, otherwise false	TBA

Modes

You can control the behavior of the typewriter effect by passing specific props to the <Typewriter> component, the table below contains information about all modes:

Mode	Type	Description	Default
default		Apply animation simultaneously on all elements, as opposed to the sequential animation of cascade mode	true	DEMO
cascade	boolean	Apply animation on all elements sequentially instead of simultaneously	false	DEMO
loop	boolean or number	Cycles the animation between the children elements of the parent Typewriter component, the interval (in milliseconds) between each word can be defined by passing a number as the parameter, otherwise defaults to 1500	false	DEMO
loopRandom	boolean or number	It's very similar to loop mode, but instead of cycling the animation in a linear way, it picks a random child element to animate each time, the interval (in milliseconds) between each word can be defined by passing a number as the parameter, otherwise defaults to 1500	false	DEMO
scramble	boolean or number	Randomize all letters in a element text for a specific amount of time, if a number is passed as argument, it's defined as the duration of the animation (defaults to 3000)	false	DEMO

Event listeners

Event	Trigger
on:done	Is executed at the end of the animation, if used with loop mode, this event will be fired at the end of each loop	DEMO

Child attributes

Attribute	Description
data-static	Marks an element as static, excluding it from receiving animations from the <Typewriter> component

Used by

FAQs

UMD and IIFE output formats are not supported for code-splitting builds.

From version 2.1.17 onwards, this library makes use of dynamic imports, if your Rollup configuration output.format is set to iife or umd, consider setting inlineDynamicImports to true, otherwise, change output.format to something else, like esm (for more details, consider checking #21)

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b fix/my-new-bug-fix
3. Preview your changes with yarn dev (or npm run dev)
4. Commit your changes: git commit -am 'fix: Fix some bug'
5. Push to the branch: git push origin fix/my-new-bug-fix
6. Submit a pull request :D