Simple animated headlines!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Initial commit Feb 22, 2017
src Initial commit Feb 22, 2017
.gitignore Initial commit Feb 22, 2017
bower.json Update bower.json Apr 23, 2017
package.json Initial commit Feb 22, 2017
webpack.mix.js Initial commit Feb 22, 2017

jQuery Animated Headlines

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



npm install jquery-animated-headlines


bower install jquery-animated-headlines

Default Usage

Include the css in your head.

<link rel="stylesheet" src="dist/css/jquery.animatedheadline.css">

Use the following markup.

<div class="selector">
    <h1 class="ah-headline">
        <span>My favorite food is</span>
        <span class="ah-words-wrapper">
            <b class="is-visible">pizza</b>

Finally, initialize the plugin.

<script src="dist/js/jquery.animatedheadline.min.js"></script>
    $(function() {

Advanced Usage

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

    $(function() {
            animationType: 'type'


It is recommended to use the default delay options. Because of this, I won't list them below. See src/js/jquery.animatedheadline.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', and 'push'


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