Angular text animation plugin
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-animatepackage is just a collection of reusable animations and it is not required for Teximate to work
Usage
Import TeximateModule in your root module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TeximateModule } from 'ngx-teximate'; @NgModule({ imports: [ BrowserAnimationsModule, // Add this only in the root module TeximateModule ] })- Add
<teximate>component into your template - Create a
TextAnimationobject and pass it to on of these inputs[enter][leave][animation]. - Pick the animation you like from
ng-animateand set it in theTextAnimationobject
Example:
import { Component } from '@angular/core'; import { TextAnimation } from 'ngx-teximate'; import { fadeInDown } from 'ng-animate'; @Component({ selector: 'app-root', template: ` <teximate [text]="text" [enter]="enterAnimation"></teximate> ` }) 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:
import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { TextAnimation } from 'ngx-teximate'; import { fadeInDown } from 'ng-animate'; @Component({ selector: 'app-root', template: ` <teximate [text]="text"></teximate> <button (click)="play()"></button> ` }) 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.
Issues
If you identify any errors in this module, or have an idea for an improvement, please open an issue.
Support
Please give Teximate a
Author
Murhaf Sousli
