Svelte-animated-headline NPM

npm weekly downloads npm version license

Svelte Animated Headline

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

Svelte Animated Headline Example

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>