Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
svelte-typewriter
Advanced tools
A simple and reusable typewriter effect for your Svelte applications
A simple and reusable typewriter effect for your Svelte applications
# yarn
yarn add -D svelte-typewriter
# npm
npm i -D svelte-typewriter
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>
The <Typewriter>
component can receive props that allows to manipulate the behavior of the resulting animation, these props are divided into 4 groups
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 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 |
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 | 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 |
Attribute | Description |
---|---|
data-static | Marks an element as static, excluding it from receiving animations from the <Typewriter> component |
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)
git checkout -b fix/my-new-bug-fix
yarn dev
(or npm run dev
)git commit -am 'fix: Fix some bug'
git push origin fix/my-new-bug-fix
FAQs
A simple and reusable typewriter effect for your Svelte applications
The npm package svelte-typewriter receives a total of 4,469 weekly downloads. As such, svelte-typewriter popularity was classified as popular.
We found that svelte-typewriter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.