svelte-animated-headline
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Netlify Status npm weekly downloads npm version license

DEMO | REPL

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>

For more code examples and playground: REPL

Used by

ConfettiPage.io

License

MIT license

Publishing

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

pnpm publish

Package Sidebar

Install

npm i svelte-animated-headline

Weekly Downloads

78

Version

1.0.7

License

MIT

Unpacked Size

8.82 kB

Total Files

8

Last publish

Collaborators

  • elron