Next Generation Text Animation Library.

Live Examples

Getting Started

Textify.js is a animation engine for web typography animations, which are use to create smooth, creative or seamless animations of typography. Also it’s provide multiple animations types or custom animations on GSAP's power.

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/[email protected]/dist/Textify.min.css" rel="stylesheet"/>

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

ES6 module

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

    new Textify({}, gsap);
</script>

Usage

Import Textify.js and gsap:

import Textify from "textify.js";
import gsap from "gsap";

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 (add gsap too).

import Textify from "textify.js";
import gsap from "gsap";

new Textify({}, gsap);

By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.

Configuration options

  splitType: "lines words chars", // chars or words or lines
  largeText: false, // true or 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
    }

For, more information about configs, check Documentation

Documentation

Check main documentation of Textify.js here:

• Site
• Documentation & Examples
• Demo

Methods

Textify contains instance methods. these are used to control the animation. these methods are help to maintain animation stability. these methods are following:

• animateIn - Reveal animation.
• animateOut - Hide animation.
• reset - Re-calulate all texts position and offset (call on DOM changes and resize event)

Example:

const textObj = new Textify({}, gsap);

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

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

// Re-calulate all texts position and offset
textObj.reset();

License

Released under MIT by @MAGGIx1404.

Rate us

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