{"id":16702408,"url":"https://github.com/murhafsousli/ngx-teximate","last_synced_at":"2025-03-15T13:30:50.167Z","repository":{"id":18843272,"uuid":"85423231","full_name":"MurhafSousli/ngx-teximate","owner":"MurhafSousli","description":"Angular text animations","archived":false,"fork":false,"pushed_at":"2023-03-03T00:03:38.000Z","size":4858,"stargazers_count":103,"open_issues_count":25,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-27T01:52:35.912Z","etag":null,"topics":["angular","animatecss","letters","text","text-animation","words"],"latest_commit_sha":null,"homepage":"https://murhafsousli.github.io/ngx-teximate/","language":"TypeScript","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/MurhafSousli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-03-18T18:29:38.000Z","updated_at":"2025-02-19T10:49:56.000Z","dependencies_parsed_at":"2024-06-19T03:08:33.087Z","dependency_job_id":null,"html_url":"https://github.com/MurhafSousli/ngx-teximate","commit_stats":{"total_commits":81,"total_committers":2,"mean_commits":40.5,"dds":"0.23456790123456794","last_synced_commit":"7eecace7e9ef9a6f8be10b8513e5173ba0a60030"},"previous_names":["murhafsousli/ng-teximate"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-teximate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-teximate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-teximate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-teximate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MurhafSousli","download_url":"https://codeload.github.com/MurhafSousli/ngx-teximate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243735795,"owners_count":20339530,"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":["angular","animatecss","letters","text","text-animation","words"],"created_at":"2024-10-12T19:04:36.742Z","updated_at":"2025-03-15T13:30:49.732Z","avatar_url":"https://github.com/MurhafSousli.png","language":"TypeScript","funding_links":["https://www.patreon.com/bePatron?u=5594898"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"150px\" width=\"150px\" style=\"text-align: center;\" src=\"https://cdn.rawgit.com/MurhafSousli/ng-teximate/9acbe5dd/assets/logo.svg\"\u003e\n  \u003ch1 align=\"center\"\u003eAngular text animation plugin\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-teximate)\n[![npm](https://img.shields.io/npm/v/ngx-teximate.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-teximate) \n[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-teximate.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-teximate) \n[![npm](https://img.shields.io/npm/dt/ngx-teximate.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-teximate)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-teximate.svg)](https://bundlephobia.com/result?p=ngx-teximate)\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](https://github.com/MurhafSousli/ngx-teximate/blob/master/LICENSE)\n\n___\n\nA text animation plugin built on top of Angular animation engine\n\n## Installation\n\n**NPM**\n\n```\nnpm install -S ngx-teximate ng-animate\n```\n\n**YARN**\n\n```\nyarn add ngx-teximate ng-animate\n```\n\n \u003e **NOTE:** `ng-animate` package is just a collection of reusable animations and it is not required for Teximate to work\n\n\n## Usage\n\nImport **TeximateModule** in your root module\n\n```ts\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { TeximateModule } from 'ngx-teximate';\n\n@NgModule({\n  imports: [\n    BrowserAnimationsModule,  // Add this only in the root module\n    TeximateModule\n  ]\n})\n```\n\n1. Add `\u003cteximate\u003e` component into your template\n2. Create a `TextAnimation` object and pass it to on of these inputs `[enter]` `[leave]` `[animation]`.\n3. Pick the animation you like from `ng-animate` and set it in the `TextAnimation` object\n\n#### Example:\n\n```ts\nimport { Component } from '@angular/core';\nimport { TextAnimation } from 'ngx-teximate';\nimport { fadeInDown } from 'ng-animate';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cteximate [text]=\"text\" [enter]=\"enterAnimation\"\u003e\u003c/teximate\u003e\n  `\n})\nexport class AppComponent {\n\n  text = 'Lorem ipsum dolor sit amet.';\n \n  enterAnimation: TextAnimation = {\n    animation: fadeInDown,\n    delay: 50,\n    type: 'letter'\n  };\n}  \n```\n\nThere are 3 main animations inputs `[enter]`, `[leave]` and `[animation]`, but you can still register more animations\n\n#### Example:\n\n```ts\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { TextAnimation } from 'ngx-teximate';\nimport { fadeInDown } from 'ng-animate';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cteximate [text]=\"text\"\u003e\u003c/teximate\u003e\n    \u003cbutton (click)=\"play()\"\u003e\u003c/button\u003e\n  `\n})\nexport class AppComponent implements AfterViewInit {\n\n  @ViewChild(Teximate): teximate: Teximate;\n\n  text = 'Lorem ipsum dolor sit amet.';\n  \n  ngAfterViewInit() {\n    const customAnimation: TextAnimation = {\n      id: 'custom',\n      animation: fadeInDown,\n      delay: 50,\n      type: 'letter'\n    };\n    this.teximate.registerAnimation(customAnimation);\n  }\n  \n  play() {\n    if (this.teximate.players.has('custom')) {\n      this.teximate.players.get('custom').play();\n    }\n  }\n}   \n```\n\n## API\n\n| Name                     | type          | Description                                                      |\n| ------------------------ |-------------- | ---------------------------------------------------------------- |\n| **[text]**               | string        | Text to animate                                                  |\n| **[animation]**          | TextAnimation | Default animation, played using `teximate.defaultPlayer.play()`  |\n| **[enter]**              | TextAnimation | Enter animation, played on init                                  |\n| **[leave]**              | TextAnimation | Leave animation, played on destroy (WIP)                         |\n| **(play)**               | string        | Stream that emits when text animation is played                  |\n| **(finish)**             | string        | Stream that emits when text animation is finished                |\n| **(paragraphClick)**     | MouseEvent    | Stream that emits when a paragraph is clicked                    |\n| **(wordClick)**          | MouseEvent    | Stream that emits when a word is clicked                         |\n| **(letterClick)**        | MouseEvent    | Stream that emits when a letter is clicked                       |\n| **(paragraphHover)**     | MouseEvent    | Stream that emits when a paragraph is hovered                    |\n| **(wordHover)**          | MouseEvent    | Stream that emits when a word is hovered                         |\n| **(letterHover)**        | MouseEvent    | Stream that emits when a letter is hovered                       |\n\nSee the [stackblitz demo](https://stackblitz.com/edit/ngx-teximate).\n\n## Issues\n\nIf you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-teximate/issues).\n\n## Support\n\nPlease give **Teximate** a :star: \n\n[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)\n\n## Author\n\n **Murhaf Sousli**\n\n - [github/murhafsousli](https://github.com/MurhafSousli)\n - [twitter/murhafsousli](https://twitter.com/MurhafSousli)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurhafsousli%2Fngx-teximate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmurhafsousli%2Fngx-teximate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurhafsousli%2Fngx-teximate/lists"}