Fixed missed semicolon

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

README.md

@@ -1,10 +1,10 @@
-#Textillate.js v0.4.0  [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org)
+# Textillate.js v0.4.1  [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org)
 
 See a live demo [here](http://textillate.js.org/).
 
 Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.
 
-##Usage
+## Usage
 
 Let's start with the basic markup:
 
@@ -37,7 +37,7 @@ You can also tell textillate.js to animate a list with the following markup:
 ```html
 <h1 class="tlt">
 	<ul class="texts">
-		<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>	
+		<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
 		<li data-in-effect="fadeIn">Another Title</li>
 	</ul>
 </h1>
@@ -49,68 +49,68 @@ $('.tlt').textillate();
 
 Notice that you can control the animation parameters on each text (`<li>`) using the data api.
 
-##Dependencies
+## Dependencies
 To start using textillate.js, you will need the following:
 
 * [jQuery](http://jquery.com/download/)
 * [lettering.js](https://github.com/davatron5000/Lettering.js)
 * [animate.css](https://github.com/daneden/animate.css)
 
 
-##Options
+## Options
 
 ```js
 $('.tlt').textillate({
   // the default selector to use when detecting multiple texts to animate
   selector: '.texts',
-  
+
   // enable looping
   loop: false,
-  
+
   // sets the minimum display time for each text before it is replaced
   minDisplayTime: 2000,
-  
+
   // sets the initial delay before starting the animation
-  // (note that depending on the in effect you may need to manually apply 
+  // (note that depending on the in effect you may need to manually apply
   // visibility: hidden to the element before running this plugin)
   initialDelay: 0,
-    
+
   // set whether or not to automatically start animating
   autoStart: true,
-  
-  // custom set of 'in' effects. This effects whether or not the 
-  // character is shown/hidden before or after an animation  
+
+  // custom set of 'in' effects. This effects whether or not the
+  // character is shown/hidden before or after an animation
   inEffects: [],
-  
+
   // custom set of 'out' effects
   outEffects: [ 'hinge' ],
-  
+
   // in animation settings
   in: {
   	// set the effect name
     effect: 'fadeInLeftBig',
-    
+
     // set the delay factor applied to each consecutive character
     delayScale: 1.5,
-    
+
     // set the delay between each character
     delay: 50,
-    
+
     // set to true to animate all the characters at the same time
     sync: false,
-    
-    // randomize the character sequence 
+
+    // randomize the character sequence
     // (note that shuffle doesn't make sense with sync = true)
     shuffle: false,
 
-    // reverse the character sequence 
+    // reverse the character sequence
     // (note that reverse doesn't make sense with sync = true)
     reverse: false,
 
     // callback that executes once the animation has finished
     callback: function () {}
   },
-  
+
   // out animation settings.
   out: {
     effect: 'hinge',
@@ -122,23 +122,23 @@ $('.tlt').textillate({
     callback: function () {}
   },
 
-  // callback that executes once textillate has finished 
+  // callback that executes once textillate has finished
   callback: function () {},
 
   // set the type of token to animate (available types: 'char' and 'word')
   type: 'char'
 });
 ```
 
-##Events
+## Events
 
 Textillate triggers the following events:
 
 * `start.tlt` - triggered when textillate starts
 * `inAnimationBegin.tlt` - triggered when the in animation begins
 * `inAnimationEnd.tlt` - triggered when the in animation ends
 * `outAnimationBegin.tlt` - triggered when the out animation begins
-* `outAnimationEnd.tlt` - triggered when the in animation ends
+* `outAnimationEnd.tlt` - triggered when the out animation ends
 * `end.tlt` - triggered when textillate ends
 
 ```js
@@ -147,12 +147,12 @@ $('.tlt').on('inAnimationBegin.tlt', function () {
 });
 ```
 
-##Methods
+## Methods
 
 * `$element.textillate('start')` - Manually start/restart textillate
 * `$element.textillate('stop')` - Manually pause/stop textillate
 * `$element.textillate('in')` - Trigger the current text's in animation
 * `$element.textillate('out')` - Trigger the current text's out animation
 
-##Code Samples
+## Code Samples
 * [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "textillate",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "homepage": "https://github.com/jschr/textillate",
   "authors": [
     "Jordan Schroter <[email protected]>"

index.html

@@ -19,26 +19,26 @@ <h1 class="glow in tlt">textillate.js</h1>
           <a href="https://github.com/jschr/textillate" class="btn fade in">Download on Github</a>
         </div>
         <div>
-          <a 
-            class="twitter-share-button" 
+          <a
+            class="twitter-share-button"
             href="https://twitter.com/share"
             data-text="Textillate.js - A simple plugin for CSS3 text animations"
             data-url="http://textillate.js.org"
             data-via="_jschr">
             Tweet
           </a>&nbsp;&nbsp;
-          <iframe 
-            src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=star&count=true&v=2" 
-            frameborder="0" 
-            scrolling="0" 
-            width="100px" 
+          <iframe
+            src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=star&count=true&v=2"
+            frameborder="0"
+            scrolling="0"
+            width="100px"
             height="20px">
           </iframe>
-          <iframe 
-            src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=fork&count=true" 
-            frameborder="0" 
-            scrolling="0" 
-            width="90px" 
+          <iframe
+            src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=fork&count=true"
+            frameborder="0"
+            scrolling="0"
+            width="90px"
             height="20px">
           </iframe>
         </div>
@@ -76,8 +76,8 @@ <h2>Playground</h2>
               <div class="col-1-1 viewport">
                   <div class="tlt">
                     <ul class="texts" style="display: none">
-                      <li>Grumpy wizards make toxic brew for the evil Queen and Jack.</li>
-                      <li>The quick brown fox jumps over the lazy dog.</li>
+                      <li data-id="wizard">Grumpy wizards make toxic brew for the evil Queen and Jack.</li>
+                      <li data-id="fox">The quick brown fox jumps over the lazy dog.</li>
                     </ul>
                   </div>
               </div>
@@ -147,12 +147,12 @@ <h2>Dependencies</h2>
       , $viewport = $('.playground .viewport');
 
     var getFormData = function () {
-      var data = { 
-        loop: true, 
-        in: { callback: log('in callback called.') }, 
+      var data = {
+        loop: true,
+        in: { callback: log('in callback called.') },
         out: { callback: log('out callback called.') }
       };
-      
+
       $form.find('[data-key="effect"]').each(function () {
         var $this = $(this)
           , key = $this.data('key')
@@ -183,10 +183,10 @@ <h2>Dependencies</h2>
         type = '[data-type="out"]';
       } else if (/In/.test(value)) {
         type = '[data-type="in"]';
-      } 
+      }
 
       if (type) {
-        $form.find('[data-key="effect"]' + type).append(option);        
+        $form.find('[data-key="effect"]' + type).append(option);
       }
     });
 
@@ -196,7 +196,7 @@ <h2>Dependencies</h2>
     $('.jumbotron h1')
       .fitText(0.5)
       .textillate({ in: { effect: 'flipInY' }});
-    
+
     $('.jumbotron p')
       .fitText(3.2, { maxFontSize: 18 })
       .textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } });
@@ -216,7 +216,7 @@ <h2>Dependencies</h2>
       .on('outAnimationBegin.tlt', log('outAnimationBegin.tlt triggered.'))
       .on('outAnimationEnd.tlt', log('outAnimationEnd.tlt triggered.'))
       .on('end.tlt', log('end.tlt'));
-    
+
     $form.on('change', function () {
       var obj = getFormData();
       $tlt.textillate(obj);

jquery.textillate.js

@@ -56,7 +56,7 @@
       .css('visibility', 'visible')
       .show();
 
-    $t.one('animationend webkitAnimationEnd oAnimationEnd', function () {
+    $t.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
         $t.removeClass('animated ' + effect);
         cb && cb();
     });
@@ -148,6 +148,7 @@
       $elem.addClass('current');
 
       base.triggerEvent('inAnimationBegin');
+      $element.attr('data-active', $elem.data('id'));
 
       base.$current
         .html($elem.html())
@@ -196,6 +197,7 @@
       animateTokens($tokens, options.out, function () {
         $elem.removeClass('current');
         base.triggerEvent('outAnimationEnd');
+        $element.removeAttr('data-active');
         if (options.out.callback) options.out.callback();
         if (cb) cb(base);
       });
@@ -205,26 +207,26 @@
       setTimeout(function () {
         base.triggerEvent('start');
 
-      (function run (index) {
-        base.in(index, function () {
-          var length = base.$texts.children().length;
-
-          index += 1;
-
-          if (!base.options.loop && index >= length) {
-            if (base.options.callback) base.options.callback();
-            base.triggerEvent('end');
-          } else {
-            index = index % length;
-
-            base.timeoutRun = setTimeout(function () {
-              base.out(function () {
-                run(index)
-              });
-            }, base.options.minDisplayTime);
-          }
-        });
-      }(index || 0));
+        (function run (index) {
+          base.in(index, function () {
+            var length = base.$texts.children().length;
+
+            index += 1;
+
+            if (!base.options.loop && index >= length) {
+              if (base.options.callback) base.options.callback();
+              base.triggerEvent('end');
+            } else {
+              index = index % length;
+
+              base.timeoutRun = setTimeout(function () {
+                base.out(function () {
+                  run(index)
+                });
+              }, base.options.minDisplayTime);
+            }
+          });
+        }(index || 0));
       }, base.options.initialDelay);
     };
 

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "textillate",
+  "version": "0.4.1",
+  "homepage": "https://github.com/jschr/textillate",
+  "authors": [
+    "Jordan Schroter <[email protected]>"
+  ],
+  "description": "A simple plugin for CSS3 text animations",
+  "main": "jquery.textillate.js",
+  "keywords": [
+    "textillate",
+    "css3",
+    "animation",
+    "text",
+    "lettering"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": ">= 1.6.2",
+    "letteringjs": ">= 0.6.1",
+    "animate.css": ">= 3.0.0"
+  }
+}