Svelte Animated Headline

elron
29

Need a Svelte website built?

Hire a professional Svelte developer today.

Download

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>