svelte-typewriter
A simple and reusable typewriter effect for your Svelte applications

DEMO
Summary
Installation
pnpm i -D svelte-typewriter
pnpm
is used here just as an example, you can use your package manager of choice
Usage
Component-based approach
In order to use this method, 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>
</Typewriter>
Directive-based approach
This method relies on Svelte actions
(more specifically, the use:action
directive), in order to animate your
components with this approach, you must import the directive of the animation
mode you want to use and include it as a attribute on your element
<script>
import { concurrent } from 'svelte-typewriter'
</script>
<p use:concurrent={{ interval: 30 }}>Testing the typewriter effect</p>
Each mode has it's own directive, which accepts a single object parameter that
can be used to set the animation props (just like on the component-based approach)
There are just a few limitations of this approach to keep in mind:
- For now, there's no way to have the cursor caret on the text being animated
- Event listeners (like
on:done
) won't be triggered - Depending on the animation mode you're using, some essential animation
properties must be explicitly specified, because they don't have default values
when used on a directive, otherwise the animation won't work properly, those
include
interval
, wordInterval
, writeInterval
and scrambleDuration
Props
The <Typewriter>
component can receive props that allows to manipulate the
behavior of the resulting animation, these props are divided into the following
groups
- Settings: general animation properties
- 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 |
---|
mode | concurrent , cascade , loop , loopOnce , loopRandom or scramble | The animation mode to be used | concurrent |
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 |
cursor | boolean | Enables/disables the cursor on the Typewriter animation | true |
keepCursorOnFinish | number or boolean | Keep the cursor visible (indefinitely, or for a given amount of time, in milliseconds) after the animation has finished | false |
delay | number | The interval (in milliseconds) before the animation starts | 0 |
showCursorOnDelay | boolean | (only usable when delay is not 0) Shows the cursor during delay period | false |
disabled | boolean | Enables/disables the typewriter animation | false |
element | string | Sets the tag that will be used for the container element | div |
wordInterval | number | (loop , loopOnce and loopRandom modes only) Sets the interval (in milliseconds) between each word | 1500 |
unwriteInterval | number | (loop , loopOnce and loopRandom modes only) The interval (in milliseconds) between each letter unwrite, if not defined it uses interval | 30 |
scrambleDuration | number | (scramble mode only) Sets the duration (in milliseconds) of the scramble animation | 3000 |
scrambleSlowdown | boolean | (scramble mode only) Enables/disables the slowdown effect right before the scramble animation ends (only works in scramble mode) | true |
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 | Description |
---|
concurrent | Apply animation simultaneously on all elements, as opposed to the sequential animation of cascade mode |
cascade | Apply animation on all elements sequentially instead of simultaneously |
loop | Cycles the animation between the children elements of the parent Typewriter component |
loopOnce | It's very similar to the loop mode, but the animation stops once it reaches the last element |
loopRandom | 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 |
scramble | Slowly reveals the a word by continuously randomizing all of it's letters for a specific amount of time |
Event listeners
Event | Trigger | Detail |
---|
on:done | Is executed at the end of the animation, if used with one of the loop modes, this event will be fired after each word gets written and erased | "write" | "unwrite" | null |
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:
module.exports = {
transformIgnorePatterns: ["/node_modules/(?!(svelte-typewriter)/)"]
}
More details on #73
Contributing
- Fork it
- Create your feature branch:
git checkout -b fix/my-new-bug-fix
- Preview your changes by running the
dev
script on package.json
- Commit your changes:
git commit -am 'fix: solve some issue'
- Push to the branch:
git push --set-upstream origin fix/my-new-bug-fix
- Submit a pull request