Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Angular text animations

License

NotificationsYou must be signed in to change notification settings

MurhafSousli/ngx-teximate

Repository files navigation

Angular text animation plugin

npmnpmTravis branchnpmnpm 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

ImportTeximateModule 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 moduleTeximateModule]})
  1. Add<teximate> component into your template
  2. Create aTextAnimation object and pass it to on of these inputs[enter][leave][animation].
  3. Pick the animation you like fromng-animate and set it in theTextAnimation 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>  `})exportclassAppComponent{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>  `})exportclassAppComponentimplementsAfterViewInit{  @ViewChild(Teximate):teximate:Teximate;text='Lorem ipsum dolor sit amet.';ngAfterViewInit(){constcustomAnimation: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

NametypeDescription
[text]stringText to animate
[animation]TextAnimationDefault animation, played usingteximate.defaultPlayer.play()
[enter]TextAnimationEnter animation, played on init
[leave]TextAnimationLeave animation, played on destroy (WIP)
(play)stringStream that emits when text animation is played
(finish)stringStream that emits when text animation is finished
(paragraphClick)MouseEventStream that emits when a paragraph is clicked
(wordClick)MouseEventStream that emits when a word is clicked
(letterClick)MouseEventStream that emits when a letter is clicked
(paragraphHover)MouseEventStream that emits when a paragraph is hovered
(wordHover)MouseEventStream that emits when a word is hovered
(letterHover)MouseEventStream that emits when a letter is hovered

See thestackblitz demo.

Issues

If you identify any errors in this module, or have an idea for an improvement, please open anissue.

Support

Please giveTeximate a ⭐

npm

Author

Murhaf Sousli

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp