Animated Headlines with Vanilla JavaScript

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 class="is-visible">pizza</b>
        <b>sushi</b>
        <b>steak</b>
    </span>
</h1>

Advanced Usage

Options

The Animated Headlines component provides multiple options 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.