index.html

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Morphext Example / Demo</title>
        <meta name="description" content="A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
        <link rel="stylesheet" href="dist/morphext.css">
    </head>
    <body>
        <div style="text-align:center">
            I am a <span id="js-rotating">So Simple, Very Doge, Much Wow, Such Cool</span> Text Rotator
        </div>

        <script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>
        <script src="dist/morphext.js"></script>
        <script>
            $("#js-rotating").Morphext({
                animation: "rotateIn",
                complete: function () {
                    console.log("This is called after a phrase is animated in! Current phrase index: " + this.index);
                }
            });
        </script>
    </body>
</html>