Live Examples

Getting Started

Textify.js is an animation engine for web typography, designed to create smooth and creative animations of text. It offers multiple types of animations and integrates beautifully with GSAP for enhanced functionality.

Using Package Manager

NPM

Install Textify using npm:

npm install textify.js

Yarn

Install Textify using yarn:

yarn add textify.js

Using CDN

To include Textify.js via CDN, add the following links to your HTML:

<link src="https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.js"></script>

ES6 Module

For ES6 module usage, you can import it like this:

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

Usage

To get started, import Textify.js and GSAP in your JavaScript:

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

Then link the CSS file in your HTML:

<link src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css" rel="stylesheet">

Add the data-textify attribute to any paragraph or text element:

<p data-textify>Some cool text.</p>

Finally, initialize Textify to make the magic happen:

new Textify(, gsap);

Configuration Options

Textify comes with a variety of configuration options to customize your animations:

• splitType: Set to ‘lines’, ‘words’, or ‘chars’.
• largeText: Boolean for large text handling.
• repeat: Set to true or false to enable repeating animations.
• animation: Configure details such as duration, stagger, and ease.
• animateProps: Customize animation properties like opacity and scale.

For comprehensive details about the configuration options, refer to the Documentation.

Documentation and Methods

Check the main documentation for Textify.js here:

• Site
• Documentation & Examples
• Demo

Textify includes several instance methods for controlling your animations:

• animateIn: Reveals animations.
• animateOut: Hides animations.
• reset: Recalculate all text positions after DOM changes.

Troubleshooting

If you encounter any issues while implementing Textify.js, consider the following troubleshooting steps:

• Ensure that both Textify.js and GSAP are correctly imported.
• Check that the data-textify attribute is correctly placed on your text elements.
• Look for console errors that might indicate problems with your JavaScript code.
• Make sure to adjust your configuration options as necessary to achieve the desired effect.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.