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

# pnpm
pnpm i -D svelte-animated-headline

pnpm is used here just as an example, you can use your package of choice

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

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes