From 73448ef852512558f9bfef531fee1b9cafd67be4 Mon Sep 17 00:00:00 2001 From: Pahaz Blinov Date: Sun, 28 Jun 2015 17:42:21 +0500 Subject: [PATCH 1/7] Add recommended by animate.css animation-end event listeners --- jquery.textillate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.textillate.js b/jquery.textillate.js index 23943a9..49b9eb0 100644 --- a/jquery.textillate.js +++ b/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(); }); From 1a8b555b8a294105f50ced53eee6ef881220d6e8 Mon Sep 17 00:00:00 2001 From: Jordan Schroter Date: Tue, 8 Nov 2016 19:54:30 -0500 Subject: [PATCH 2/7] formatting --- jquery.textillate.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/jquery.textillate.js b/jquery.textillate.js index 49b9eb0..557aaaf 100644 --- a/jquery.textillate.js +++ b/jquery.textillate.js @@ -205,26 +205,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); }; From 54a2a79a546e6a6f7035e16526a193bacb94aac8 Mon Sep 17 00:00:00 2001 From: Jordan Schroter Date: Tue, 8 Nov 2016 20:12:07 -0500 Subject: [PATCH 3/7] support styling based on currently active item (#100) --- README.md | 40 ++++++++++++++++++++-------------------- bower.json | 2 +- index.html | 44 ++++++++++++++++++++++---------------------- jquery.textillate.js | 2 ++ 4 files changed, 45 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index b083dca..288f1a1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -#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/). @@ -37,7 +37,7 @@ You can also tell textillate.js to animate a list with the following markup: ```html

    -
  • Some Title
    • +
  • Some Title
  • Another Title

@@ -63,54 +63,54 @@ To start using textillate.js, you will need the following: $('.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,7 +122,7 @@ $('.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') diff --git a/bower.json b/bower.json index c24572f..745c6ff 100644 --- a/bower.json +++ b/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 " diff --git a/index.html b/index.html index 2cd55e1..475b86e 100644 --- a/index.html +++ b/index.html @@ -19,26 +19,26 @@

textillate.js

Download on Github
-    - -
@@ -76,8 +76,8 @@

Playground

@@ -147,12 +147,12 @@

Dependencies

, $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 @@

Dependencies

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 @@

Dependencies

$('.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 @@

Dependencies

.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); diff --git a/jquery.textillate.js b/jquery.textillate.js index 557aaaf..e81fe8e 100644 --- a/jquery.textillate.js +++ b/jquery.textillate.js @@ -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); }); From abda17c657f2b7f5dcd152408334f1f43627aef9 Mon Sep 17 00:00:00 2001 From: Ryan Lester Date: Thu, 9 Feb 2017 14:26:46 -0800 Subject: [PATCH 4/7] add package.json --- package.json | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..745c6ff --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "textillate", + "version": "0.4.1", + "homepage": "https://github.com/jschr/textillate", + "authors": [ + "Jordan Schroter " + ], + "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" + } +} From 78cb169ad895aa2c578a535d278d2753d3623c0e Mon Sep 17 00:00:00 2001 From: Jordan Schroter Date: Wed, 26 Apr 2017 11:46:03 -0400 Subject: [PATCH 5/7] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 288f1a1..5f1d145 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -#Textillate.js v0.4.1 [![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: @@ -49,7 +49,7 @@ $('.tlt').textillate(); Notice that you can control the animation parameters on each text (`
  • `) using the data api. -##Dependencies +## Dependencies To start using textillate.js, you will need the following: * [jQuery](http://jquery.com/download/) @@ -57,7 +57,7 @@ To start using textillate.js, you will need the following: * [animate.css](https://github.com/daneden/animate.css) -##Options +## Options ```js $('.tlt').textillate({ @@ -130,7 +130,7 @@ $('.tlt').textillate({ }); ``` -##Events +## Events Textillate triggers the following events: @@ -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) From 605231a2550ca04d28f88c46a4e6aaa38f1ab5f4 Mon Sep 17 00:00:00 2001 From: Peter Ryszkiewicz Date: Tue, 7 Nov 2017 21:05:14 -0600 Subject: [PATCH 6/7] Add gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7a1537b --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules From 0d3f1959175c39dddf8ab700e0684d282575fc0f Mon Sep 17 00:00:00 2001 From: Zach Bresser <11512275+CHBresser@users.noreply.github.com> Date: Mon, 11 Dec 2017 10:57:46 -0500 Subject: [PATCH 7/7] Update README.md `outAnimationEnd.tlt` - triggered when the out animation ends (out was in). --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5f1d145..fe03320 100644 --- a/README.md +++ b/README.md @@ -138,7 +138,7 @@ Textillate triggers the following events: * `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