This package has been deprecated

    Author message:

    This package had been deprecated, please use ngx-teximate instead!

    ng-teximate
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.3 • Public • Published

    npm Travis branch npm

    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

    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

    npm

    Install

    npm i ng-teximate

    DownloadsWeekly Downloads

    1

    Version

    0.6.3

    License

    MIT

    Last publish

    Collaborators

    • murhaf