Animated Headlines with Vanilla JavaScript

Animated headlines with interchangeable words that replace one another through CSS transitions.

Demo

see https://vianetz.github.io/animated-headlines-vanilla/

Installation

npm

npm install https://github.com/vianetz/animated-headlines-vanilla/

bower

bower install https://github.com/vianetz/animated-headlines-vanilla/

Default Usage

Include the css in your head.

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

Use the following markup.

<section class="animated-headline">
    <h1>
        My favorite food is
        <span class="ah-words-wrapper">
            <b class="is-visible">pizza</b>
            <b>sushi</b>
            <b>steak</b>
        </span>
    </h1>
</section>

Finally, initialize the plugin.

<script src="dist/js/animated-headline.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => AnimatedHeadline('.ah-words-wrapper'));
</script>

Advanced Usage

The plugin provides multiple options to customize the animation type and delay.

<script>
    document.addEventListener('DOMContentLoaded', () =>
        AnimatedHeadline('.ah-words-wrapper', {
            animationType: 'type',
            animationDelay: 1500,
        })
    );
</script>

Options

It is recommended to use the default delay options. Because of this, I won't list them below. See src/js/animated-headline.js for a complete list of options.

Name	Type	Default	Description
animation-type	string	rotate-1	Type of animation used. Options: rotate-1 rotate-2 rotate-3 type loading-bar slide clip zoom scale push

License

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