{"id":13602310,"url":"https://github.com/jschr/textillate","last_synced_at":"2025-05-14T07:08:38.003Z","repository":{"id":6572329,"uuid":"7814311","full_name":"jschr/textillate","owner":"jschr","description":"A jquery plugin for CSS3 text animations.","archived":false,"fork":false,"pushed_at":"2021-08-04T07:49:57.000Z","size":74,"stargazers_count":3672,"open_issues_count":69,"forks_count":759,"subscribers_count":163,"default_branch":"master","last_synced_at":"2025-05-06T07:26:50.685Z","etag":null,"topics":["css-animations","javascript","jquery","text","textillate"],"latest_commit_sha":null,"homepage":"http://textillate.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jschr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-25T05:35:40.000Z","updated_at":"2025-05-06T07:26:39.000Z","dependencies_parsed_at":"2022-09-15T01:12:11.042Z","dependency_job_id":null,"html_url":"https://github.com/jschr/textillate","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Ftextillate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Ftextillate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Ftextillate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Ftextillate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jschr","download_url":"https://codeload.github.com/jschr/textillate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253451478,"owners_count":21910711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-animations","javascript","jquery","text","textillate"],"created_at":"2024-08-01T18:01:19.821Z","updated_at":"2025-05-14T07:08:37.978Z","avatar_url":"https://github.com/jschr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Animations","Animations [🔝](#readme)","Uncategorized","动画","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Other","Uncategorized","其它"],"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\u003ch1 class=\"tlt\"\u003eMy Title\u003c/h1\u003e\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\u003ch1 class=\"tlt\" data-in-effect=\"rollIn\"\u003eTitle\u003c/h1\u003e\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\u003ch1 class=\"tlt\"\u003e\n\t\u003cul class=\"texts\"\u003e\n\t\t\u003cli data-out-effect=\"fadeOut\" data-out-shuffle=\"true\"\u003eSome Title\u003c/li\u003e\n\t\t\u003cli data-in-effect=\"fadeIn\"\u003eAnother Title\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/h1\u003e\n```\n\n```js\n$('.tlt').textillate();\n```\n\nNotice that you can control the animation parameters on each text (`\u003cli\u003e`) 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 out 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Ftextillate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjschr%2Ftextillate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Ftextillate/lists"}