Skip to content

MurhafSousli/ngx-teximate

Repository files navigation

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

npm

Author

Murhaf Sousli