Textify.js is a animation engine for web typography animations, which are use to create smooth, creative or seamless animations of typography. Also itโs provide multiple animations types or custom animations on GSAP's power.
Install textify using npm:
npm install textify.js
Install textify using yarn
yarn add textify.js
<link src="https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.js"></script>
<script type="module">
import Textify from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';
new Textify();
</script>
Import Textify.js:
import Textify from "textify.js";
Link Textify.min.css
to document:
<link src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css" rel="stylesheet"/>
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.
import Textify from "textify.js";
new Textify()
By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.
splitType: "lines words chars", // chars or words or lines
largeText: false, // true or false
observer: {
repeat: false, // true or false
threshold: 0.5 // 0.0 ~ 1.0
},
animation: {
by: "chars", // chars or words or lines
duration: 0.5, // seconds
stagger: 0.05, // seconds
delay: 0.0, // seconds
ease: "ease", // ease or linear or cubic-bezier
customAnimation: false, // true or false
transformOrigin: "center center", // center center or top left or top center or top right or center right or bottom right or bottom center or bottom left or center left
animateProps: {
opacity: 1, // 0 ~ 1
y: "100%", // -100 ~ 100 (%)
x: 0, // -100 ~ 100 (%)
scale: 1, // 0 ~ 1
rotate: 0, // -360 ~ 360
skewX: 0, // -360 ~ 360
skewY: 0 // -360 ~ 360
}
For, more information about configs, check Documentation
Check main documentation of Textify.js here:
Textify contains instance methods. these are used to control the animation. these methods are help to maintain animation stability. these
methods are following:
animateIn
- Reveal animation.animateOut
- Hide animation.reset
- Re-calulate all texts position and offset (call on DOM changes and resize event)
Example:
const textObj = new Textify();
// reveal all animations of textObj
textObj.animateIn();
// hide all animations of textObj
textObj.animateOut();
// Re-calulate all texts position and offset
textObj.reset();
Released under MIT by @MAGGIx1404.
Enjoying textify.js? Please leave a short review on Openbase