{"id":16223512,"url":"https://github.com/kaisermann/textlooper","last_synced_at":"2025-08-03T04:16:11.777Z","repository":{"id":58243000,"uuid":"41701417","full_name":"kaisermann/textlooper","owner":"kaisermann","description":"Customizable and lightweight text content looper based on CSS animations.","archived":false,"fork":false,"pushed_at":"2017-05-10T18:21:38.000Z","size":80,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T07:01:46.247Z","etag":null,"topics":["animation","css","css-animations","customizable","delay","loop","text"],"latest_commit_sha":null,"homepage":"","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/kaisermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-31T21:24:55.000Z","updated_at":"2024-09-20T02:52:32.000Z","dependencies_parsed_at":"2022-08-31T01:01:41.317Z","dependency_job_id":null,"html_url":"https://github.com/kaisermann/textlooper","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Ftextlooper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Ftextlooper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Ftextlooper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Ftextlooper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaisermann","download_url":"https://codeload.github.com/kaisermann/textlooper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244426325,"owners_count":20450945,"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":["animation","css","css-animations","customizable","delay","loop","text"],"created_at":"2024-10-10T12:19:07.087Z","updated_at":"2025-03-19T12:30:29.347Z","avatar_url":"https://github.com/kaisermann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Whaaaaat?\n\n* A very customizable and lightweight (1.35kB gzipped) text content looper based on CSS animations.\n* This script uses `@keyframe` animations. That said, I highly recommend using [**Animate.css**](https://daneden.github.io/animate.css/).\n\n### [Sample/Demo](http://10de10.com.br/404)\n\n# How to use\n\n## Using html attributes\n\nTo loop an element's text, just set a `data-textlooper` attribute on the desired element and call the `TextLooper.seek()` method somewhere on your code.\n\n#### Attributes\n* `data-textlooper` _(mandatory)_\n\n  * Use `data-textlooper` with a single interval to specify a delay between all elements\n  * Use `data-textlooper` with intervals separated by '|' to specify each delay\n\n* `data-textlooper-separator` _(optional)_\n\n  * Changes the default separator `,`\n\n* `data-textlooper-in` _(optional)_\n\n  * Use `data-textlooper-in` with a single animation name to specify the 'in'/'intro' animation to all elements\n  * Use `data-textlooper-in` with animation names separated by '|' to specify each element's 'in'/'intro' animation\n  * Defaults to `fadeIn` if defined without values\n\n* `data-textlooper-out` _(optional)_\n\n  * Use `data-textlooper-out` with a single animation name to specify the 'out'/'outro' animation to all elements\n  * Use `data-textlooper-out` with animation names separated by '|' to specify each element's 'out'/'outro' animation\n  * Defaults to `fadeOut` if defined without values\n\n* `data-textlooper-comeback` _(optional)_\n\n  * Set the `data-textlooper-comeback` attribute if it's desired to also run the inverted animations before changing to the next phrase.\n  * Will be ignore if defined together with `data-textlooper-out`\n\n## Using javascript\n\nIt is possible to start looping a text node just by passing it as a parameter to a new instance of a TextLooper object.\n\nExample:\n\n```javascript\nnew TextLooper(node, {\n  phrases: ['Array','of','phrases','to','loop']\n  ins: ['slideInUp'],\n  outs: ['slideOut'],\n  delays: [1000,1000,2000,3000,3000],\n  comebackAsOut: false\n}).start();\n```\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e\n                Attribute Name\n            \u003c/th\u003e\n            \u003cth\u003e\n                Description\n            \u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\n                phrases\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003ccode\u003eArray\u003c/code\u003e: phrases to loop through\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\n                ins\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003ccode\u003eString\u003c/code\u003e: a single in-animation for all iterations.\n                \u003cbr\u003e \u003ccode\u003eArray\u003c/code\u003e: customizable in-animations for each iteration.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\n                outs\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003ccode\u003eString\u003c/code\u003e: a single out-animation for all iterations.\n                \u003cbr\u003e \u003ccode\u003eArray\u003c/code\u003e: customizable out-animations for each iteration.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\n                delays\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003ccode\u003eInteger\u003c/code\u003e: a single delay interval for all iterations.\n                \u003cbr\u003e \u003ccode\u003eArray\u003c/code\u003e: customizable delay intervals for each iteration.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\n                comebackAsOut\n            \u003c/td\u003e\n            \u003ctd\u003e\n                A \u003ccode\u003eboolean\u003c/code\u003e defining if the out-animation should be the respective reversed in-animation.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n# Observations\n\n## Visibility\n\nLoopText sets 'visibility: visible' when it starts looping. This way you can hide your phrases before the script runs with a 'visibility: hidden' statement.\n\n## Delay interval behaviour\n\nFor text-lopping WITHOUT comeback/out animations the delay interval starts counting AFTER the current animation has ended.\n\nFor text-looping WITH comeback/out animations the delay interval starts AFTER the first iteration of an animation but not after its comeback/out animations.\n\n## Missing list items\n\nEach missing animation/delay item will be replaced with the first one of its list.\n\nExample:\n\n```html\n\u003cspan data-textlooper=\"700|1000|500\" data-textlooper-in=\"pulse|fadeIn|swing\"\u003e\n  Multiple, animations, on, this, one\n\u003c/span\u003e\n```\n\nThere are 5 different text elements and only three in-animations/delay items. The two missing items will be replaced by, respectively, '700' and 'pulse'.\n\n# Examples\n\n#### [Live examples](http://kaisermann.github.io/textlooper/)\n\n```html\n\u003c!-- Default animation (fadeIn), default delay (1500), default separator  --\u003e\n\u003cspan data-textlooper\u003e\n\tDefault, Phrase 1, Phrase 2, Phrase 3\n\u003c/span\u003e\n\n\u003c!-- Same animation as above but with its comeback animations --\u003e\n\u003cspan data-textlooper data-textlooper-comeback\u003e\n\tDefault, Phrase 1, Phrase 2, Phrase 3\n\u003c/span\u003e\n\n\u003c!-- Same animation as above but with default out animation (fadeOut --\u003e\n\u003cspan data-textlooper data-textlooper-out\u003e\n\tDefault, Phrase 1, Phrase 2, Phrase 3\n\u003c/span\u003e\n\n\u003c!-- Default animation (fadeIn), default delay (1500), default separator  --\u003e\n\u003cspan data-textlooper\u003e\n\tDefault, Phrase 1, Phrase 2, Phrase 3\n\u003c/span\u003e\n\n\u003c!-- Default animation (fadeIn), default delay (1500), custom separator  --\u003e\n\u003cspan data-textlooper data-textlooper-separator=\"|\"\u003e\n\tLet's, Change | The, Separator | He he\n\u003c/span\u003e\n\n\u003c!-- Default animation (fadeIn), one delay (1000), custom separator  --\u003e\n\u003cspan data-textlooper=\"1000\" data-textlooper-separator=\"|\"\u003e\n\tThis | will | wait | one | second\n\u003c/span\u003e\n\n\u003c!-- Default animation (fadeIn), multiple delays --\u003e\n\u003cspan data-textlooper=\"500|500|500|500|1000\"\u003e\n\tMultiple, delays, one, default, animation\n\u003c/span\u003e\n\n\u003c!-- Default delay (1500), one animation (bounceIn --\u003e\n\u003cspan data-textlooper data-textlooper-in=\"bounceIn\"\u003e\n\tDefault, delay, one, custom, animation\n\u003c/span\u003e\n\n\u003c!-- Default delay (1500), multiple animations --\u003e\n\u003cspan data-textlooper data-textlooper-in=\"pulse|fadeIn|swing|fadeOut|bounceIn\"\u003e\n\tMultiple, animations, one, default, delay\n\u003c/span\u003e\n\n\u003c!-- One delay (1000), multiple animations --\u003e\n\u003cspan data-textlooper=\"1000\" data-textlooper-in=\"pulse|fadeIn|swing|slideInLeft\"\u003e\n\tMultiple, animations, one, delay\n\u003c/span\u003e\n\n\u003c!-- Multiple animations, multiple delays --\u003e\n\u003cspan data-textlooper=\"500|500|500|500|1000\" data-textlooper-in=\"pulse|fadeIn|swing|slideInUp\"\u003e\n\tMultiple, animations, on, this, one\n\u003c/span\u003e\n\n\u003c!-- Multiple animations, multiple delays with comebacks --\u003e\n\u003cspan data-textlooper=\"500|500|500|500|1000\" data-textlooper-in=\"pulse|fadeIn|swing|slideInUp\" data-textlooper-comeback\u003e\n\tMultiple, animations, on, this, one\n\u003c/span\u003e\n```\n\n## Methods\n\n```javascript\nvar node = document.createElement('span'), tl;\n\n// Creates a new instance and parses the node's attributes\ntl = new TextLooper(node);\n\n// Creates a new instance and skips the parsing step\ntl = new TextLooper(node, {\n  phrases: ['Phrase 1','Phrase 2'],\n  ins: 'fadeIn',\n  comebackAsOut: true\n});\n\n// Starts looping\ntl.start();\n\n// Gets an instance attributes (phrases, animations, delays and separator)\ntl.getAttributes();\n```\n\n##### Static\n\n```javascript\n// Look for (new) textLoopable elements\nTextLooper.seek();\n\n// Overrides default values\nTextLooper.setDefaults({\n  delay: 1500,\n  in: 'fadeIn',\n  out: 'fadeOut',\n  selector: 'data-textlooper',\n  separator: ','\n});\n\n// Gets TextLooper default values\nTextLooper.getDefaults();\n```\n\n# Compatibility\n\nIE 10, Webkit 4.0, Firefox 16, Opera 15\n\n# Bonus credits\n\n* [Vitor Paladini](https://github.com/vtrpldn) for naming the `data-textlooper-comeback` attribute. (It was really hard to come up with a name for it and he mockingly requested for credits, so here we are).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Ftextlooper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaisermann%2Ftextlooper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Ftextlooper/lists"}