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
<link src="/dist/Textify.min.css" rel="stylesheet"/>
<script src="/dist/Textify.min.js"></script>

3. The latest Textify.js supports custom animations based on the GSAP library.

# NPM
$ npm i gsap

// ES 6
import gsap from 'gsap';
// Browser
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

4. Initialize the Textify.js library.

// without GSAP
const example = new Textify({
      // options here
});
// with GSAP
const example = new Textify({
      // options here
}, gsap);

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

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

6. Config the text reveal animation:

el: "[data-textify]"
splitType: "lines words chars", // chars or words or lines
largeText: false,
observer: {
  repeat: false, // true or false
  threshold: 0.5 // 0.0 ~ 1.0
},
animation: {
  by: "chars", // chars or words or lines
  duration: 0.5, // seconds
  stagger: 0.05, // seconds
  delay: 0.0, // seconds
  ease: "ease", // ease or linear or cubic-bezier
  customAnimation: false, // true or false
  transformOrigin: "center center", // center center or top left or top center or top right or center right or bottom right or bottom center or bottom left or center left
  animateProps: {
    opacity: 1, // 0 ~ 1
    y: "100%", // -100 ~ 100 (%)
    x: 0, // -100 ~ 100 (%)
    scale: 1, // 0 ~ 1
    rotate: 0, // -360 ~ 360
    skewX: 0, // -360 ~ 360
    skewY: 0 // -360 ~ 360
}

7. API methods.

// reveal animation
example.animateIn();
// hide animation
example.animateOut();
// re-calculate all texts position and offset
example.reset();

Changelog:

v3.0.1 (08/03/2023)

• Textify.js v3.0.1 have too much new features and we added new animation engine. and engine get power from GSAP. now your text animation make more smooth and light weight. we add few new animation props and options.

v2.3.3 (01/24/2023)

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