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
;
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 */;
another way is to use it from the CDN
Now you can use Teximate component:
teximate ="text" ="type" ="options" ="hover"/teximate
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 */
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
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!