Animated Headlines Web Component

Animated Headlines with interchangeable words that replace one another through CSS transitions.
See demo.

Installation

npm

npm install @vianetz/animated-headlines-vanilla

bower

bower install @vianetz/animated-headlines-vanilla

Default Usage

Include the CSS and JavaScript in your head:

<link rel="stylesheet" src="dist/animated-headline.css">
<script src="dist/animated-headline.js" defer></script>

Then use the following markup:

<h1>
    My favorite food is
    <via-animated-headline animation="rotate-1">
        <b>pizza</b>
        <b hidden>sushi</b>
        <b hidden>steak</b>
    </span>
</h1>

Advanced Usage

Options

The Animated Headlines component provides multiple attributes to customize different animation settings depending on the type, e.g.:

| Option | Description | |-------------|-----------------------------------------------------------------------------------------------------------------------------------| | animation | The animation effect, one of: rotate-1, rotate-2, rotate-3, type, loading-bar, slide, clip, zoom, scale, push | | hold | Seconds to wait before starting a new animation cycle | | delay | Seconds to delay the effect, e.g. typing or rotating |

The options are set as html attributes on the custom component like this:

<via-animated-headline animation="type" hold="3000" delay="1000">

See also demo source for a full list of options for all types.

License

Animated Headlines is open-sourced software licensed under the MIT license.