mughal-textify

v1.0.1

Published

10 days ago

Textify.js - The ultimate GSAP-powered text animation library for Mughal.Dev. Create stunning text reveal, glitch, and kinetic effects with ease. Built by Zain Ali.

<<<<<<< HEAD

Textify-js

=======

🚀 Textify.js - The Ultimate Text Animation Library

"Transform your static text into a cinematic experience with a single line of code."

Textify.js is a high-performance, modular GSAP-powered text animation library designed for developers who want to create stunning, premium-grade text reveal, glitch text, and kinetic typography effects with ease. Whether you're building a creative portfolio, a high-converting landing page, or a digital dashboard, Textify.js is the professional choice for modern web motion.

🔥 Key Features

65+ Pre-built Animations: From corporate fades to hacker-style glitches.
GSAP Powered: Built on the world's most robust animation engine.
Zero Configuration: Smart defaults mean you're ready to go in seconds.
ScrollTrigger Ready: Native support for scroll-linked animations.
Modular & Lightweight: Only import what you need.
SEO Optimized: Animations are designed to be crawlable and accessible.
Developer First: Full JSDoc support for all functions.

✨ A Message from Mughal.Dev

At Mughal.Dev, we believe that the web should be alive. Static text is a lost opportunity for engagement. Textify.js was born from the need to bridge the gap between "good" websites and "legendary" ones.

Developed by Zain Ali, this library is not just a tool - it's a tribute to the art of motion. We’ve done the heavy lifting, the splitting, the math, and the physics, so you can focus on what matters: Your Vision.

🛠 Installation

1. NPM (Recommended)

npm install mughal-textify gsap

2. CDN (Browser)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://unpkg.com/mughal-textify"></script>

🚀 Quick Start

Initialize your first animation in seconds:

import { Textify } from 'mughal-textify';

// Entrance effect
Textify.entrance.fadeIn(".hero-title");

// Character effect
Textify.chars.staggeredLetters(".sub-title", { y: 50 });

🌊 Scroll Trigger Integration

One of the most powerful features of Textify.js is its seamless integration with GSAP's ScrollTrigger.

// Trigger any animation when it enters the viewport
Textify.scroll.trigger(".section-title", Textify.entrance.slideUpReveal, {
    start: "top 80%",
    scrub: true, // Link animation to the scrollbar movement
    duration: 1.5
});

📖 Animation Encyclopedia

Textify.js is organized into specialized namespaces to help you find the perfect effect.

1. Entrance (`Textify.entrance`)

Perfect for landing elements and page loads.

fadeIn: Simple, clean opacity fade.
scaleUp: Bouncy scaling entrance.
rotateIn: Dynamic rotation from a pivot point.
slideFromLeft / slideFromRight: Classic horizontal slides.
zoomOut: Dramatic zoom-in transition.
flipX / flipY: 3D revolution on axes.
slideUpReveal: Masked upward reveal (Requires overflow: hidden).
curtainReveal: Theater-style unfold from the center.

2. Per-Character (`Textify.chars`)

Detailed, granular motion for high-impact titles.

staggeredLetters: Bouncy vertical stagger.
waveColorShift: Color and position wave.
cascadeReveal: Dropping letters with rotation.
dominoFall: 3D Y-axis character fall.
popcorn: Playful "popping" entrance heights.
firework: Central explosion from the middle.
rippleWave: Scaling "drop in water" effect.

3. Kinetic (`Textify.kinetic`)

Physics-based movements that feel alive.

bounceIn: Classic gravity bounce.
elasticSnap: Overshooting elastic slide.
rubberBand: Flex and squash distortion.
gravityFall: Characters dropping and settling.
slotMachine: Rapid 3D cylinder spin.
dropShatter: Impact results in random rotations.
earthquake: High-frequency screen shake.

4. Glitch (`Textify.glitch`)

Digital errors, hacker aesthetics, and CRT styles.

digitalGlitch: Jittery X/Skew distortion.
cipherDecode: Scrambles text before reveal.
neonFlicker: Failing neon sign light sequence.
matrixRain: Iconic vertical digital rain.
crtBoot: Old monitor power-on sequence.
rgbSplit: Faked chromatic aberration.

5. Creative (`Textify.creative`)

Artistic, narrative-focused reveal styles.

typewriter: Character-by-character typing.
inkBleed: Blurry, spreading "ink" effect.
smokeRise: Drifting upward while blurring out.
ghostTrail: Dramatic trail with layered offsets.
counter: Smooth numeric incrementing.
stencilFill: Outlined text filling with solid color.

6. Paragraph (`Textify.paragraph`)

Engineered for multi-line storytelling.

wordReveal: Word-by-word staggered entrance.
scrollWordHighlight: Characters/Words light up as you scroll.
redactionReveal: Unmasking classified redaction bars.
focusShift: Sequential shifting of blur focus across lines.
bouncyLines: Stacking line elements with physics.

⚙️ Advanced Configuration

Every function in Textify.js accepts an options object as its second argument.

Common Options:

The "Spread" Feature

Textify.js uses the spread operator (...options) internally. This means you can pass any valid GSAP property (like onComplete, repeat, yoyo, etc.) directly into our functions, and they will be passed to the underlying engine.

🌐 Browser Compatibility

Textify.js supports all modern browsers (Chrome, Firefox, Safari, Edge) that are compatible with GSAP 3.x.

| Browser | Supported | Note | | :--- | :--- | :--- | | Chrome | ✅ Yes | Full Support | | Firefox | ✅ Yes | Full Support | | Safari | ✅ Yes | Full Support | | Edge | ✅ Yes | Full Support | | IE11 | ❌ No | Legacy - Use polyfills |

🔧 Troubleshooting

1. Animations are not triggering

Ensure GSAP and ScrollTrigger are properly loaded.
Check if the selector (e.g., .title) exists in the DOM at the time of execution.

2. Layout shifts after splitting

Textify.js splits text into inline-blocks. For best results, use a parent container with defined line-height and font-family.

🤝 Contributing & Community

Join the Mughal.Dev community to suggest new animations, report bugs, or share your creations!

Fork the repository.
Create your feature branch (git checkout -b feature/AmazingEffect).
Commit your changes.
Push to the branch.
Open a Pull Request.

🏛 Community & Support

Author: Zain Ali
Organization: Mughal.Dev
Email: [email protected]
WhatsApp: Join our Community Channel

✨ Join for more exclusive drops: WhatsApp Channel

Love Textify.js? Star the repo on GitHub and join our community to help us build the future of web motion!

📜 License

Licensed under the MIT License.

Built with ❤️ by Zain Ali for Mughal.Dev.

72a36f4 (initial commit: Textify.js v1.0.0)