{"_id":"textillate","_rev":"4-3ddebc9b4b386dd35b4a224a153f203f","name":"textillate","description":"A simple plugin for CSS3 text animations","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.1":{"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"},"gitHead":"54a2a79a546e6a6f7035e16526a193bacb94aac8","_id":"textillate@0.4.1","scripts":{},"_shasum":"543e7461ca58ce453546be668b27f79c502fb501","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.4.0","_npmUser":{"name":"buu700","email":"hacker@linux.com"},"dist":{"shasum":"543e7461ca58ce453546be668b27f79c502fb501","tarball":"https://registry.npmjs.org/textillate/-/textillate-0.4.1.tgz","integrity":"sha512-htUal0T4DsDLLtozLrRGe4snjmVj5eM/goAiBvcg8bK3VUvMMkN7xE0IhuawXNQm+6z0vrH3dIKNYJwyWssaEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAORv8mEa1tP52XqCulqGvL87Ffc/duqIjf3W29galk0AiAG3ZTrOkzQxPDAgAKzFT6SbVsYtD9hJ+26PxMQJrnD9A=="}]},"maintainers":[{"name":"buu700","email":"hacker@linux.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/textillate-0.4.1.tgz_1486679125275_0.8835860278923064"}}},"readme":"#Textillate.js v0.4.1 [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org)\n\nSee a live demo [here](http://textillate.js.org/).\n\nTextillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.\n\n##Usage\n\nLet's start with the basic markup:\n\n```html\n

My Title

\n```\n\nAnd your JavaScript should look like this:\n\n```js\n$(function () {\n\t$('.tlt').textillate();\n})\n```\n\nThis will animate using the default options. To change the defaults, you can either use the html data api:\n\n```html\n

Title

\n```\n\nor pass in options on initialization (see full list of options below):\n\n```js\n$('.tlt').textillate({ in: { effect: 'rollIn' } });\n```\n\nYou can also tell textillate.js to animate a list with the following markup:\n\n```html\n

\n\t\n

\n```\n\n```js\n$('.tlt').textillate();\n```\n\nNotice that you can control the animation parameters on each text (`
  • `) using the data api.\n\n##Dependencies\nTo start using textillate.js, you will need the following:\n\n* [jQuery](http://jquery.com/download/)\n* [lettering.js](https://github.com/davatron5000/Lettering.js)\n* [animate.css](https://github.com/daneden/animate.css)\n\n\n##Options\n\n```js\n$('.tlt').textillate({\n // the default selector to use when detecting multiple texts to animate\n selector: '.texts',\n\n // enable looping\n loop: false,\n\n // sets the minimum display time for each text before it is replaced\n minDisplayTime: 2000,\n\n // sets the initial delay before starting the animation\n // (note that depending on the in effect you may need to manually apply\n // visibility: hidden to the element before running this plugin)\n initialDelay: 0,\n\n // set whether or not to automatically start animating\n autoStart: true,\n\n // custom set of 'in' effects. This effects whether or not the\n // character is shown/hidden before or after an animation\n inEffects: [],\n\n // custom set of 'out' effects\n outEffects: [ 'hinge' ],\n\n // in animation settings\n in: {\n \t// set the effect name\n effect: 'fadeInLeftBig',\n\n // set the delay factor applied to each consecutive character\n delayScale: 1.5,\n\n // set the delay between each character\n delay: 50,\n\n // set to true to animate all the characters at the same time\n sync: false,\n\n // randomize the character sequence\n // (note that shuffle doesn't make sense with sync = true)\n shuffle: false,\n\n // reverse the character sequence\n // (note that reverse doesn't make sense with sync = true)\n reverse: false,\n\n // callback that executes once the animation has finished\n callback: function () {}\n },\n\n // out animation settings.\n out: {\n effect: 'hinge',\n delayScale: 1.5,\n delay: 50,\n sync: false,\n shuffle: false,\n reverse: false,\n callback: function () {}\n },\n\n // callback that executes once textillate has finished\n callback: function () {},\n\n // set the type of token to animate (available types: 'char' and 'word')\n type: 'char'\n});\n```\n\n##Events\n\nTextillate triggers the following events:\n\n* `start.tlt` - triggered when textillate starts\n* `inAnimationBegin.tlt` - triggered when the in animation begins\n* `inAnimationEnd.tlt` - triggered when the in animation ends\n* `outAnimationBegin.tlt` - triggered when the out animation begins\n* `outAnimationEnd.tlt` - triggered when the in animation ends\n* `end.tlt` - triggered when textillate ends\n\n```js\n$('.tlt').on('inAnimationBegin.tlt', function () {\n // do something\n});\n```\n\n##Methods\n\n* `$element.textillate('start')` - Manually start/restart textillate\n* `$element.textillate('stop')` - Manually pause/stop textillate\n* `$element.textillate('in')` - Trigger the current text's in animation\n* `$element.textillate('out')` - Trigger the current text's out animation\n\n##Code Samples\n* [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi)\n","maintainers":[{"name":"jschr","email":"jordan.schroter@gmail.com"}],"time":{"modified":"2022-06-27T05:45:35.077Z","created":"2017-02-09T22:25:25.509Z","0.4.1":"2017-02-09T22:25:25.509Z"},"homepage":"https://github.com/jschr/textillate","keywords":["textillate","css3","animation","text","lettering"],"license":"MIT","readmeFilename":"README.md"}