murhafsousli / ngx-teximate

Angular text animations

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

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

ngx-teximate's Issues

Is it possible to use this lib with ngx-highlightjs?

Is it possible to use this lib with ngx-highlightjs? if yes, can you provide example

RunEffect method not working

Dynamically change of text is not working properly

Hi,

I'm trying to initiate animation using 5 seconds period with different text. I have created follow example:
https://stackblitz.com/edit/ngx-teximate-trbcxf?file=src%2Fapp%2Fapp.component.ts.
It does the animation but using the legacy text. if I use setText property to set the text, then the text is changed but animation is lost.

How can I do my target?
Thanks

Unsubscribe Error when moving between routes quickly

Unsubscribing in TeximateComponent.OnDestroy is causing this error

ObjectUnsubscribedError
message : "object unsubscribed"
name : "ObjectUnsubscribedError"
ObjectUnsubscribedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3620:33)↵

code:

Ondestroy() {
   this.teximate.text.unsubscribe();
   this.teximate.worker.unsubscribe();
}

How force linebreaks ?

Is there an option to pass html as argument ? For example for line break and is not possible with "
" since it scapes html. Also tried with "\n" but text after "\n" was not animated.

Loop animation

Is possible improve the code to have animations with an infinite loop?

Thanks

IE 11 problem with RegExp

Hi @MurhafSousli ,

Thanks for your great library, that is awesome!

There is a problem with IE browser, that will cause a problem with IE by /u,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

/** Convert text string into a workable text */
export function teximateFactory(text: string): string[][][] {
  const paragraphs: string[][][] = [];
  // Split text into paragraphs
  text.split('\n').map((paragraph: string) => {
    const words: string[][] = [];
    // Split paragraph into words
    paragraph
      .split(' ')
      .filter(word => word !== '')
      .map((word: string) =>
        // Split word into letters
        words.push(word.split(/(?!$)/u))
      );
    paragraphs.push(words);
  });
  return paragraphs;
}

https://github.com/MurhafSousli/ngx-teximate/blob/master/projects/teximate/src/lib/teximate.ts

Is there could change the split(/(?!$)/u) to just split(/(?!$)/), I think that is also work perfectly.

a way to skip animation to the end

Would be great if there was a way to skip the animation to end in. For example if you are in a rush and just want to tap or click to finish the animation and display all the text at once.

Using this feature breaks my app routing

Somehow the tag breaks my app.
after using it in my html template I coudnt't use my navigation bar and the content of my component has disappeared
this is my home.component.ts

import { AfterContentInit,
    ChangeDetectionStrategy, Component, 
   ElementRef,
    OnDestroy,
    OnInit,
    Renderer2,
     } from '@angular/core';
import { TextAnimation } from 'ngx-teximate';
import { rotateInDownLeft, fadeIn } from 'ng-animate';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
  
})
export class HomeComponent implements OnInit , AfterContentInit,OnDestroy  {
  

  

  constructor(private renderer : Renderer2, private el : ElementRef) { }
  
 
  text = 'Start editing to see some magic happen :)';
  
  enterAnimation: TextAnimation = {
    animation: fadeIn,
    delay: 50,
    type: 'letter'
  };
  ngOnInit(): void {
  }

  

 
  

  ngAfterContentInit(): void {
    
    
    
    this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', '#d8dee9');
  
  
  
  }

  ngOnDestroy(): void {
    this.renderer.removeStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor');
    
  }


}

HTML template :

<h1>
	<teximate #teximate [text]="text" [enter]="enterAnimation"></teximate>
</h1>

<button (click)="teximate.enterPlayer.play()">Play</button>

I have done the necessary imports in app.module.ts.

click effect

Word class is 'undefined' instead of word number

fix shuffle on words

hover effect

play and finish outputs emit only the first time unless animation is changed

Need angular/angular#26630 to be fixed, related angular/angular#18789

Or create new player every time play() is called

Create a chain-able API to create and play text animation

@Component({
...
})
export class MyComponent {
   teximate = new TeximateBuilder()
       .content('Hello World')
       .animate(fadeInLeft, 50)
       .pause(1000)
       .animate(fadeOutUp, 50)
       .go();
}

stackblitz demo not loading

Wanted to see what this library does and what it looks like, but seems like stackblitz isn't loading

Angular 6 integration

Hello,

Is anyone else having problems integrating "teximate" into their angular 6 project?

I've impotred it into my root module (app.module.ts), imported the animate.css into my styles.scss.
I had to import "TeximateOptions" and "TeximateOrder" from "ng-teximate/helper/teximate.class" in my controller to remove "Can't find name" error. And I still cant make angular recognize as a known element ( 'teximate' is not a known element - error).

I bet I overlooked something small, but cant find it for the life of me...
Any help would be appreciated.

leave animation

needs angular/angular#26612 to be fixed

Convert line element from DIV to P

Currently it can be solved by adding

.line{
    margin-bottom: 12px;
}

but it is better to use <p> instead of <div>