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

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