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

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 <teximate> 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:

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 :star:

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli