{"id":16710361,"url":"https://github.com/mgrsskls/typing-effect","last_synced_at":"2025-04-10T05:35:11.414Z","repository":{"id":35056474,"uuid":"201427850","full_name":"mgrsskls/typing-effect","owner":"mgrsskls","description":"Typing effect that prevents elements from jumping around when the text becomes multiline","archived":false,"fork":false,"pushed_at":"2023-10-05T00:38:28.000Z","size":1776,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T15:36:57.785Z","etag":null,"topics":["animation","effect","es6","esmodule","type","typing"],"latest_commit_sha":null,"homepage":"https://mgrsskls.github.io/typing-effect","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/mgrsskls.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-09T08:40:48.000Z","updated_at":"2022-09-08T20:19:41.000Z","dependencies_parsed_at":"2024-06-19T22:52:03.504Z","dependency_job_id":"df773593-bacc-4e57-8556-d25b1f5a29f5","html_url":"https://github.com/mgrsskls/typing-effect","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":"0.33333333333333337","last_synced_commit":"2538a7e64c1f723a7283b648298c70081f8310d5"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrsskls%2Ftyping-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrsskls%2Ftyping-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrsskls%2Ftyping-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrsskls%2Ftyping-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgrsskls","download_url":"https://codeload.github.com/mgrsskls/typing-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163861,"owners_count":21058037,"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","effect","es6","esmodule","type","typing"],"created_at":"2024-10-12T20:08:11.735Z","updated_at":"2025-04-10T05:35:11.346Z","avatar_url":"https://github.com/mgrsskls.png","language":"JavaScript","readme":"# typing effect\n\n`typing-effect` creates a typing effect for one or multiple elements.\nOther libraries usually append character by character, which causes other elements on the page to jump around, most of the times when the animated text becomes multiline. This library avoids that by keeping the text in the DOM, wrapping every character and hiding it.\nThat way you can also center the text and every character will already be at its final position in the viewport.\nWhen the animation is done, everything will be resetted and the wrappers are removed.\n\n## Demo\n\n[https://mgrsskls.github.io/typing-effect](https://mgrsskls.github.io/typing-effect)\n\n## Installation\n\n`npm install typing-effect`\nor\nadd [https://mgrsskls.github.io/typing-effect/typing-effect.js](https://mgrsskls.github.io/typing-effect/typing-effect.js) to your project if you don't want to use the ES6 module.\n\n## Options\n\n```js\n{\n  speed: 30,  // the typing speed\n  delay: 300, // the delay between two animated elements,\n  reset: true // defines if the animated text gets replaced with the original text when the animation is done\n}\n```\n\n## Usage\n\nInclude `index.css` from this library into your project or add the following CSS\n\n```css\n[data-typing-effect] {\n  visibility: hidden;\n}\n```\n\nand add the `data-typing-effect` attribute to the elements you want to animate.\n\n`typing-effect` would still work without, but you might be able to see the animated text for a small moment before the animation starts.\n\n```js\nimport typingEffect from \"typing-effect\"; // when not using https://mgrsskls.github.io/typing-effect/typing-effect.js\n\n// a single element\ntypingEffect(document.querySelector(\"[data-typing-effect]\"));\n\n// multiple elements\ntypingEffect(Array.from(document.querySelectorAll(\"[data-typing-effect]\")));\n\n// passing options\ntypingEffect(\n  Array.from(document.querySelectorAll(\"[data-typing-effect]\"), {\n    speed: 50,\n    delay: 50,\n    reset: false\n  })\n);\n\n// doing something when the animation is done:\ntypingEffect(\n  Array.from(document.querySelectorAll(\"[data-typing-effect]\"))\n).then(() =\u003e doSomething());\n```\n\n_**NOTE**_: If the text moves a bit when the animation is done, you can use `{ reset: false }`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgrsskls%2Ftyping-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgrsskls%2Ftyping-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgrsskls%2Ftyping-effect/lists"}