Simple scroll based text reveal animation library.

maintained - yes contributions - welcome Made with JavaScript

⛰️ 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:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Textify.min.js"></script>

Usage

Import Textify.js:

import Textify from "textify.js";

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.

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
delay 100 Delay between animation of two lines. Value between 0 to 500 ms
fade false For fade animation.
top false Text reveal direction. Default is bottom to top
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

API

Textify object exposed following 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();

document.getElementById("btn").addEventListener("click", () => {
    textObj.show();
})

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.

GitHub

View Github