ng-teximate

Angular Teximate

A simple module for CSS3 text animations | live demo

Teximate does 2 things:

• Creates lines, words and letters elements from a text
• Animates words or letters using animate.css

Installation

Install it with npm

npm install ng-teximate --save

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-teximate:

map: {
  'ng-teximate': 'node_modules/ng-teximate/bundles/ng-teximate.umd.js',
}

Here is a working plunker

Usage

Import TeximateModule in your root module

import {TeximateModule} from "ng-teximate";
@NgModule({
  imports: [
    TeximateModule
  ]
})

Teximate uses animate.css to animate the words/letters.

Install it npm install animate.css --save and import it in your global style

/* You can add global styles to this file, and also import other style files */
@import '~animate.css';

another way is to use it from the CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

Now you can use Teximate component:

<teximate [text]="text" [type]="type" [effect]="options" [hover]="hover"></teximate>

export class SomeComponent {

  text = 'It’s kind of fun to do the impossible. 👾';

  options: TeximateOptions = {
    type: 'letter',
    animation: { name: 'zoomInLeft', duration: 1000 },
    word: { type: TeximateOrder.SHUFFLE, delay: 100 },
    letter: { type: TeximateOrder.SHUFFLE, delay: 50 }
  };

  hover: TeximateHover = {
    type: 'letter',
    in: 'zoomOutUp',
    out: 'bounceInDown'
  };

  // another way to apply an effect using component reference

  @ViewChild(TeximateComponent) teximate: TeximateComponent;

  ngOnInit(){

    const diffOptions: TeximateOptions = {
      type: 'word',
      animation: { name: 'bounce', duration: 1000 },
      word: { type: TeximateOrder.SEQUENCE, delay: 100 },
      letter: { type: TeximateOrder.SEQUENCE, delay: 50 }
    };

    setTimeout(()=>{
      this.teximate.runEffect(diffOptions);
    }, 2500);
  }
}  

Teximate animates the text automatically by changing the inputs. you can manually run the animation using the component reference and then call teximate.runEffect(options).

Styling:

Add styles to lines, words and letters of the text by using the classes .line .word .letter

for example:

/** Add the custom css in the global style, not in the component stylesheet */
.letter{
  text-shadow: 1px 1px 1px rgba(#000, .5);
}
.word1{
   background-color: red;
}
.letter2{
   color: blue;
}

Note that the css rules should be in the global style.css. otherwise the style won't effect the text if you add them from your component style unless you use encapsulation: ViewEncapsulation.None on it.

Teximate Inputs:

• text: string text to be displayed

• effect: TeximateOptions choose animation class and its duration

options: {                                
    type: string                          either `'word'` or `'letter'`
    animation: { 
        name: string                      animation class name (animate.css)
        duration: number                  animation duration in ms (setting css animation-duration)
    },
    word: { 
        type: string                      order (SEQUENCE, REVERSE, SHUFFLE, SYNC)
        delay: number                     delay between each word and the next one in ms
    },
    letter: { 
        type: :string                     order (SEQUENCE, REVERSE, SHUFFLE, SYNC)
        delay: number                     delay after each letter and the next one in ms
    }
};

• hover: TeximateHover choose hover animation classes

options: {                                
    type: string                          'word' or 'letter' or 'off'
    in: string                            mouseover in animation class name
    out: string                           mouseover out animation class name
};

When mouse is over an animated element it the in animation starts, the out animtion starts after the animation duration.

What else? If you find this module helpful support it with a star ⭐, this will help me to push updates more frequently.

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

Issues

If you identify any errors in this module, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

License