Simple scroll based text reveal animation library.

⛰️
DEMO

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:

<link src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.js"></script>

ES6 module

<script type="module">
    import textifyJs from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';

    const { Textify } = textifyJs;

    new Textify();
</script>

Usage

Import Textify.js:

import Animations 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 Animations from "textify.js";

const { Textify } = Animations;
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
stagger	100	Delay between animation of two lines. Value between 0 to 500 ms
fade	false	For fade animation.
fadeDuration	1000	Duration of fade animation in ms
top	false	Text reveal direction. Default is bottom to top
reveal	true	Text reveal animation
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
threshold	0.5	Threshold of the text animation
transformOrigin	center center	transform origin of animation's elements

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().

   <h1 data-textify-title>
       Hello World!!!
   </h1>

   <script>
       new TextifyTitle();
   </script>

Documentation

Check main documentation of Textify.js here:

• Site
• Documentation & Examples
• Demo

Methods

Textify object and it's all plugins have same 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();

// reveal all animations of textObj
textObj.show();

// hide all animations of textObj
textObj.hide();

// Re-calulate all texts position and offset
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.

Rate us

Enjoying textify.js? Please leave a short review on Openbase