A simple and reusable typewriter effect for your Svelte applications
pnpm i -D svelte-typewriter
pnpm
is used here just as an example, you can use your package manager of choice
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>
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:
on:done
) won't be triggeredinterval
, wordInterval
, writeInterval
and scrambleDuration
The <Typewriter>
component can receive props that allows to manipulate the
behavior of the resulting animation, these props are divided into the following
groups
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 |
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 | 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 |
Attribute | Description |
---|---|
data-static |
Marks an element as static, excluding it from receiving animations from the <Typewriter> component |
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 |
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)
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
git checkout -b fix/my-new-bug-fix
dev
script on package.json
git commit -am 'fix: solve some issue'
git push --set-upstream origin fix/my-new-bug-fix