Add animated headline to your header banner, or anywhere else you want to grab attention in an informative way.
Add animated headline to your header banner, or anywhere else you want to grab attention in an informative way.
# pnpm
pnpm i -D svelte-animated-headline
pnpm is used here just as an example, you can use your package of choice
<script>
import { AnimatedHeadline } from "svelte-animated-headline";
</script>
<AnimatedHeadline texts={["Change this", "to whatever", "you like!"]} />
Prop | Type | Description | Default |
---|---|---|---|
texts | array[string] |
The text you want to animated | ["text one", "text two", "text three"] |
wait | number |
Wait duration between each item | 1000 |
fade | number |
Duration of the fade/fly effect | 300 |
slide | number |
Duration of the slide effect (this occurs while the text is hidden) | 200 |
y | number |
The fly effect. Set it as 0 if you want only the fade effect. (Can be negative as well) | 6 |
Note / Warning
Each text will be shown as a single-line. No line break support.
<AnimatedHeadline
texts={["No problem", "We can handle it", "Sure thing, honey", "Why not"]}
y={0}
wait={0}
slide={1000}
fade={500}
/>
<h3>
I <AnimatedHeadline
texts={[
"believe I can fly",
"can touch the sky",
"think about it every night and day",
"spread my wings and fly away",
]}
y={-80}
fade={2300}
slide={1000}
wait={500}
/>... 🎵
</h3>
For more code examples and playground: REPL
(Dev note): To publish this library to npm:
pnpm publish