ngx-teximate

Angular text animations component


Keywords
angular, teximate, animate, animation, text, letters, words, animatecss, text-animation
License
MIT
Install
npm install ngx-teximate@0.3.0

Documentation

Angular text animation plugin

npm npm Travis branch npm npm bundle size (minified + gzip) npm


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) ClickEvent Stream that emits when a paragraph is clicked
(wordClick) ClickEvent Stream that emits when a word is clicked
(letterClick) ClickEvent Stream that emits when a letter is clicked

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 ⭐️

npm

Author

Murhaf Sousli