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.jsInstall 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'; import gsap from 'gsap'; new Textify({}, gsap); </script>Import Textify.js and gsap:
import Textify from "textify.js"; import gsap from "gsap";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 (add gsap too).
import Textify from "textify.js"; import gsap from "gsap"; new Textify({}, gsap);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({}, gsap); // 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