Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/murhafsousli/ngx-teximate
Angular text animations
https://github.com/murhafsousli/ngx-teximate
angular animatecss letters text text-animation words
Last synced: 2 months ago
JSON representation
Angular text animations
- Host: GitHub
- URL: https://github.com/murhafsousli/ngx-teximate
- Owner: MurhafSousli
- License: mit
- Created: 2017-03-18T18:29:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T00:03:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-19T23:59:33.240Z (2 months ago)
- Topics: angular, animatecss, letters, text, text-animation, words
- Language: TypeScript
- Homepage: https://murhafsousli.github.io/ngx-teximate/
- Size: 4.63 MB
- Stars: 99
- Watchers: 5
- Forks: 9
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Angular text animation plugin
[](https://murhafsousli.github.io/ngx-teximate)
[](https://www.npmjs.com/package/ngx-teximate)
[](https://travis-ci.org/MurhafSousli/ngx-teximate)
[](https://www.npmjs.com/package/ngx-teximate)
[](https://bundlephobia.com/result?p=ngx-teximate)
[](https://github.com/MurhafSousli/ngx-teximate/blob/master/LICENSE)
___
A text animation plugin built on top of Angular animation engine
## Installation
**NPM**
```
npm install -S ngx-teximate ng-animate
```
**YARN**
```
yarn add ngx-teximate ng-animate
```
> **NOTE:** `ng-animate` package is just a collection of reusable animations and it is not required for Teximate to work
## Usage
Import **TeximateModule** in your root module
```ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TeximateModule } from 'ngx-teximate';
@NgModule({
imports: [
BrowserAnimationsModule, // Add this only in the root module
TeximateModule
]
})
```
1. Add `` component into your template
2. Create a `TextAnimation` object and pass it to on of these inputs `[enter]` `[leave]` `[animation]`.
3. Pick the animation you like from `ng-animate` and set it in the `TextAnimation` object
#### Example:
```ts
import { Component } from '@angular/core';
import { TextAnimation } from 'ngx-teximate';
import { fadeInDown } from 'ng-animate';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
text = 'Lorem ipsum dolor sit amet.';
enterAnimation: TextAnimation = {
animation: fadeInDown,
delay: 50,
type: 'letter'
};
}
```
There are 3 main animations inputs `[enter]`, `[leave]` and `[animation]`, but you can still register more animations
#### Example:
```ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TextAnimation } from 'ngx-teximate';
import { fadeInDown } from 'ng-animate';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements AfterViewInit {
@ViewChild(Teximate): teximate: Teximate;
text = 'Lorem ipsum dolor sit amet.';
ngAfterViewInit() {
const customAnimation: TextAnimation = {
id: 'custom',
animation: fadeInDown,
delay: 50,
type: 'letter'
};
this.teximate.registerAnimation(customAnimation);
}
play() {
if (this.teximate.players.has('custom')) {
this.teximate.players.get('custom').play();
}
}
}
```
## API
| Name | type | Description |
| ------------------------ |-------------- | ---------------------------------------------------------------- |
| **[text]** | string | Text to animate |
| **[animation]** | TextAnimation | Default animation, played using `teximate.defaultPlayer.play()` |
| **[enter]** | TextAnimation | Enter animation, played on init |
| **[leave]** | TextAnimation | Leave animation, played on destroy (WIP) |
| **(play)** | string | Stream that emits when text animation is played |
| **(finish)** | string | Stream that emits when text animation is finished |
| **(paragraphClick)** | MouseEvent | Stream that emits when a paragraph is clicked |
| **(wordClick)** | MouseEvent | Stream that emits when a word is clicked |
| **(letterClick)** | MouseEvent | Stream that emits when a letter is clicked |
| **(paragraphHover)** | MouseEvent | Stream that emits when a paragraph is hovered |
| **(wordHover)** | MouseEvent | Stream that emits when a word is hovered |
| **(letterHover)** | MouseEvent | Stream that emits when a letter is hovered |
See the [stackblitz demo](https://stackblitz.com/edit/ngx-teximate).
## Issues
If 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).
## Support
Please give **Teximate** a :star:
[](https://www.patreon.com/bePatron?u=5594898)
## Author
**Murhaf Sousli**
- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)