Skip to content

henriquehbr/svelte-typewriter

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

svelte-typewriter

A simple and reusable typewriter effect for your Svelte applications

PRs Welcome npm Version npm Downloads MadeWithSvelte.com shield

DEMO

Summary

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 5 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
  • CSS variables: styling-related 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
unwriteInterval number The interval in milliseconds between each letter unwrite, is valid only on loops. If not defined it uses interval false TBA
cursor boolean Enables/disables the cursor on the Typewriter animation 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
disabled boolean Enables/disabled the typewriter animation 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

CSS variables

Variable Description
--cursor-color Sets the cursor color (accepts any valid color name, hex code and rgb/rgba values)
--cursor-width Sets the cursor width

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)

Test suite failed to run: SyntaxError: Unexpected token '<'

This happens because Jest cannot parse Svelte syntax right away, it needs to be transformed by svelte-jester first, therefore, we must tell Jest to NOT ignore svelte-typewriter, as by default, everything inside node_modules is ignored and parsed as-is without any kind of pre-processing, this can be done by setting the transformIgnorePatterns property on your Jest configuration, example below:

// jest.config.js
module.exports = {
    transformIgnorePatterns: ["/node_modules/(?!(svelte-typewriter)/)"]
}

More details on #73

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