Getting Started
Using packge manager
NPM
Install textify using npm:
npm install textify.js
yarn
Install textify using yarn
yarn add textify.js
Using CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Textify.min.js"></script>
Usage
Import Textify.js:
import Textify from "textify.js";
Add data-textify attribute to your paragraph or an element that contain text.
<p data-textify>Some cool text.😎😎</p>
Initialize textify to see magic.
new Textify()
By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.
Configuration options
| Option | Default value | Description |
|---|---|---|
| duration | 1450 | Duration of text animation in ms |
| delay | 100 | Delay between animation of two lines. Value between 0 to 500 ms |
| fade | false | For fade animation. |
| top | false | Text reveal direction. Default is bottom to top |
| once | true | Whether animation should happen only once - while scrolling down |
| rotation | 0 | Add rotation on word in animation |
| scale | 1 | Add scaling on word in animation |
| easing | Default | Set easing function for animation |
| fadeEasing | Default | fade animation ease value |
| selector | data-textify | css selector for selecting elements from DOM |
API
Textify object exposed following methods.
show- Reveal animation.hide- Hide animation.onRefresh- Re-calulate all texts position and offset (call on DOM changes and resize event)
Example:
const textObj = new Textify();
document.getElementById("btn").addEventListener("click", () => {
textObj.show();
})
document.getElementById("btn").addEventListener("click", () => {
textObj.show();
})
window.addEventListener("load", () => {
textObj.onRefresh();
});
Easing functions
- easeInOut
- easeOut
- easeIn
- ease
- sharp
- linear
- back
- backIn
- backOut
- backInOut
- elasticIn
- elasticOut
- elasticInOut
- bounceIn
- bounceOut
- bounceInOut
- circIn
- circOut
- circInOut
License
Released under MIT by @MAGGIx1404.
34 Dec 14, 2022
3 Jun 21, 2022
4 Jul 1, 2022
20 Nov 29, 2022
4 Aug 14, 2022
19 Dec 31, 2022
38 Jun 4, 2022
9 Oct 25, 2022
2 Sep 13, 2022
3 May 30, 2022