Add animated headline to your header banner, or anywhere else you want to grab attention in an informative way.
npm install svelte-animated-headline
!npm weekly downloads
!npm version
!license
Add animated headline to your header banner, or anywhere else you want to grab attention in an informative way.
!Svelte Animated Headline Example
``bash`bun
bun i -D svelte-animated-headline // Svelte 5
bun i -D svelte-animated-headline@1.0.7 // Svelte 4
> bun is used here just as an example, you can use your package of choice (pnpm, npm, yarn)
html
`
$3
html
`Props
$3
| Prop | Type | Description | Default |
|---|---|---|---|
texts | | 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.
Examples
`html
y={0}
wait={0}
slide={1000}
fade={500}
/>
`html
I
"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}
/>... 🎵
`> For more code examples and playground: REPL
Used by
License
#### Publishing
(Dev note): To publish this library to npm:
bash
pnpm publish
``