DEMO | REPL

Svelte Animated Headline

Add animated headline to your header banner, or anywhere else you want to grab attention in an informative way.

Installation

# bun
bun i -D svelte-animated-headline // Svelte 5
bun i -D [email protected] // Svelte 4

bun is used here just as an example, you can use your package of choice (pnpm, npm, yarn)

Usage

1. Import:

<script>
  import { AnimatedHeadline } from "svelte-animated-headline";
</script>

2. Use:

<AnimatedHeadline texts={["Change this", "to whatever", "you like!"]} />

Props

Settings

| 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.

Examples

<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

Used by

License

MIT license

Publishing

(Dev note): To publish this library to npm:

pnpm publish