What is Textify Js?

Textify.js is a open-source library that allows you to create text animations, and user can modify the animation for themself. check out the documentation for more information. Textify.js is a simple library that works with scroll-base animations, and user can use any scrolling libraries likes locomotive-scroll, smoothscroll, etc. All libraries are compatible with Textify.js. Textify.js is a provide 20+ custom eases for create animations and fade animations.

Getting Started

Start playing around with your own Textify demo on CodePen with this template that includes all of the essentials!

Open Template on CodePen ↠

Basic Usage

Textify can be called without parameters, and it will use the default options. Textify converts the text into a small spans and add a class to each span. You can use the class to create animations. Before that link the Textify.min.css file to your document.

CSS Link

https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css

Initial DOM

DOM Output

The aftermath may seem verbose, but this won't be visible to the end user. They'll still just see "ABC".

[data-textify] Attribute

Fill the data-textify attribute with Textify API names to animate them when you call new Textify().

Options

new Textify() have a some default parameter for options. The default options are shown below, and some plugins offer expanded options.

Option	Type	Default	Description
selector	object	[data-textify]	The selector of the element that you want to animate. you can use any selector like class, id or data-attribute.
duration	string	1450	Duration of text animation in ms (1000 ms=1 second).
stagger	string	100	Delay of text animation in ms (1000 ms = 1 second). for good animation keep it between 0 to 500.
fade	boolean	false	If you want to fade the text, set it to true.
top	boolean	false	If you want to animate the text from top, set it to true.
reveal	boolean	true	If you don't want to reveal the words, set it to false.
once	boolean	true	If you want to animate the text every time the user scrolls to the element, set it to false.
rotation	string	0	Rotation of the word in deg. you can use any number of both positive and negative. for good animation keep it between -15 to 15.
scale	string	1	Scale of the word. you can use any number of both positive and negative.
easing	string	default	easing of the text animation. you can use any of the following values of easing which are available in our custom ease.
fadeDuration	string	1000	Duration of fade animation in ms (1000 ms=1 second).
fadeEasing	string	default	easing of the fade animation. you can use any of the following values of easing which are available in our custom ease.
threshold	string	0.5	Threshold of the text animation. you can use any number between 0 to 1. for good animation keep it between 0.3 to 0.7.
transformOrigin	string	center center	Transform origin of the text. first value is for x-axis and second value is for y-axis.

INSTALLATION

Why bother with build systems or files? Use the CodePen Template to make your own Textify demo!

Open Template on CodePen ↠

Using NPM

Install Textify.js from NPM:

npm install textify.js --save

Import Textify's object from the package with any name, which are you want. after import object, you can use it with two ways,

import Animations from 'textify.js';

const { Textify } = Animations;

const Textify = Animations.Textify();

Using CDN

You can get the latest version of Textify.js from the jsDelivr CDN.

Then call Textify on document load/ready or in a script at the bottom the of the <body>

Using a ESM (type="module")

You can use Textify.js as a module in a modern web browsers, node.js, and deno. This is the recommended way to use Textify.js.

INSTANCE METHODS

Textify object exposed following methods. You can use them to control the animation. All methods are chainable. like show(), hide() & onRefresh()

show()

Textify's show() method is used reveal the animation and use to create custom reveal animations on specific events.

hide()

Textify's hide() method is used hide the animation and use to create custom hide animations on specific events. and also use to create cool page leave transitions.

onRefresh()

Textify's onRefresh() method is used to refresh the animation. This method is useful when you change the content of the element. This method is Re-calulate all texts position and offset (call on DOM changes and resize event).

PLUGINS

Textify.js have a plugin system. You can use it separate the code and make it more readable. You can use it to create custom animations of texts. currently, Textify.js have only 1 plugin. TextifyTitle plugin. we will add more plugins in the future.

TextifyTitle()

TextifyTitle plugin is used to create a title animation. it's a simple plugin. you can use it to create cool title animations. this plugin is used only for the title elements like H1, H2, H3, H4, H5 & H6. this plugin have same methods like Textify object. you can use them to control the animation. all methods are chainable. like show(), hide() & onRefresh().

Code :

INSTALLATION :

TextifyTitle plugin is a part of Textify.js. you don't need to install it. you can use it directly. just call TextifyTitle on document load/ready or in a script at the bottom the of the <body>. if you want to use it as a module, you can import it from Textify.js like this :

Import as a module :

Import from Package (npm) :

import Animations from "textify.js"

const { TextifyTitle } = Animations;

new TextifyTitle();

Note :

if you use any CDN, so you can use plugins directly. you don't need to import it.

Default Options :

Option	Type	Default	Description
selector	object	[data-textify-title]	The selector of the element that you want to animate. you can use any selector like class, id or data-attribute.
duration	string	1000	Duration of text animation in ms (1000 ms=1 second).
stagger	string	50	Delay of text animation in ms (1000 ms = 1 second). for good animation keep it between 15 to 30.
fade	boolean	false	If you want to fade the text, set it to true.
top	boolean	false	If you want to animate the text from top, set it to true.
reveal	boolean	true	If you don't want to reveal the text, set it to false.
once	boolean	true	If you want to animate the text every time the user scrolls to the element, set it to false.
rotation	string	0	Rotation of the text in deg. you can use any number of both positive and negative. for good animation keep it between -15 to 15.
scale	string	1	Scale of the text. you can use any number of both positive and negative.
easing	string	default	easing of the text animation. you can use any of the following values of easing which are available in our custom ease.
fadeDuration	string	1000	Duration of fade animation in ms (1000 ms=1 second).
fadeEasing	string	default	easing of the fade animation. you can use any of the following values of easing which are available in our custom ease.
threshold	string	0.5	Threshold of the text animation. you can use any number between 0 to 1. for good animation keep it between 0.3 to 0.7.
transformOrigin	string	center center	Transform origin of the text. first value is for x-axis and second value is for y-axis.

EXTRA

in Extra, we have custom ease which is a collection of easing functions. you can use any of the following values of easing which are available in our custom ease. and also we share some of the best examples of text animations which you can use in your projects.

CUSTOM EASE

list of easing functions which are available in our custom ease.

default
easeInOut
easeOut
easeIn
ease
sharp
linear
back
backIn
backOut
backInOut
elasticIn
elasticOut
elasticInOut
bounceIn
bounceOut
bounceInOut
circIn
circOut
circInOut

EXAMPLES

here are some of the best examples of text animations which you can use in your projects.