Text Reveal Animations On Scroll – Textify.js

Preview:

Description:

Have you ever wanted to impress your users with text animations?

Textify.js is a fast and highly customizable library for creating text reveal animations triggered by scroll. This can be used for displaying instructions, tips, or just about anything else you want to show on scroll.

It uses CSS transitions and a simple API, so both designer and developer can quickly whip up cool text effects and install them on any page.

How to use it:

1. Install & download.

# NPM
$ npm i textify.js

2. Import the Textify.js.

// ES 6
import Textify from "textify.js";
// Browser
<script src="Textify.min.js"></script>

3. Initialize the Textify.js library.

const example = new Textify();

4. Add the data-textify attribute to the text to be animated on scroll.

<h1 data-textify>
  Textify.js Library Example
</h1>

5. Or apply an easing function to the text animation via JavaScript. All available easing functions:

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

const example = new Textify({
      selector: ".selector",
      easing: "back",
});

6. Config the text reveal animation:

const example = new Textify({
  
      selector: ".selector",
      // easing function
      easing: "Default",
      // fade easing
      fadeEasing: 'Default'
      // duration in ms
      duration: 1450,
      // delay in ms
      delay: 100,
      // enable fade animation
      fade: false For fade animation.
      // Text reveal direction
      // false = bottom to top
      top: false,
      // whether animation should happen only once
      once: true,
      // add rotation on words
      rotation: 0,
      // add scaling on words
      scale: 1,
      // default selector
      selector: 'data-textify',
});

7. API methods.

// start the animation
example.show();
// stop the animation
example.hide();
// re-calculate all texts position and offset
example.onRefresh();

Changelog:

v2.3.3 (01/24/2023)

• add new animation for big texts like titles or headlines. and fixed old issues