✨ Textify - Advanced GSAP SplitText Animation Plugin

> Transform your text into stunning animated experiences with 20+ professionally crafted animation styles.


🚀 Quick Start

$3

``bash
npm install textify-gsap
`

$3

`html







`

$3

`html



Hello World

Floating Particles

Pulse Glow Effect



`

🎨 Animation Styles

$3

| Style | Class | Effect | Best For |
|-------|-------|---------|----------|
| 1 | textify-style1 | Particle Explosion | Headlines, Impact Text |
| 2 | textify-style2 | Explosive Zoom | Call-to-Action, Buttons |
| 3 | textify-style3 | Wave Up | Subtitles, Descriptions |
| 4 | textify-style4 | 3D Flip | Modern Headings |
| 5 | textify-style5 | Bounce Scale | Playful Text |
| 6 | textify-style6 | Spiral Zoom | Logo Text |
| 7 | textify-style7 | Stretch Left | Navigation Items |
| 8 | textify-style8 | Float Particles | Background Text |
| 9 | textify-style9 | Typewriter | Code, Tech Content |
| 10 | textify-style10 | Magnetic Pull | Interactive Elements |
| 11 | textify-style11 | Flare Burst | Announcements |
| 12 | textify-style12 | Ripple Wave | Smooth Reveals |
| 13 | textify-style13 | Matrix Fall | Cyberpunk, Tech |
| 14 | textify-style14 | Flip Carousel | Product Names |
| 15 | textify-style15 | Pulse Glow | Neon, Gaming |
| 16 | textify-style16 | Stagger Zoom | Lists, Menus |
| 17 | textify-style17 | Wave Fold | Artistic Text |
| 18 | textify-style18 | Sine Spray | Abstract, Creative |
| 19 | textify-style19 | 3D Grid | Complex Layouts |
| 20 | textify-style20 | Glow Trail | Magical, Fantasy |

🔧 Advanced Configuration

$3

Customize any animation using HTML data attributes:

`html



data-duration="3"
data-ease="power1.out">
Slow Explosion





data-stagger="0.2"
data-color="#ff6b6b">
Custom Pulse





data-duration="2.5"
data-stagger="0.05"
data-ease="elastic.out(1, 0.3)"
data-filter="blur(2px) drop-shadow(0 0 15px blue)">
Enhanced Particles



`

$3

| Attribute | Type | Description | Example |
|-----------|------|-------------|---------|
| data-duration | Number | Animation duration in seconds | 2.5 |
| data-stagger | Number | Delay between characters | 0.1 |
| data-ease | String | GSAP easing function | power2.out |
| data-x | Number | X-axis movement | 100 |
| data-y | Number | Y-axis movement | -50 |
| data-scale | Number | Scale factor | 1.5 |
| data-rotation | Number | Rotation in degrees | 45 |
| data-opacity | Number | Initial opacity | 0.5 |
| data-filter | String | CSS filter effects | blur(2px) |
| data-color | String | Text color | #ff6b6b |

$3

`css
/ Custom colors for specific styles /
.textify-style1 .char { color: #ff6b6b; }
.textify-style15 .char { color: #4ecdc4; }

/ Add custom shadows /
.textify-style2 .char {
text-shadow: 0 0 20px currentColor;
}

/ Responsive adjustments /
@media (max-width: 768px) {
.textify-style1 .char { font-size: 0.8em; }
}
`

$3

`javascript
// Initialize with options
Textify.init({
selector: '[class*="textify-style"]',
scrollTrigger: {
start: 'top 80%',
once: true
}
});

// Manual animation trigger
Textify.animate('.my-text', 'style1');

// Batch animate multiple elements
Textify.animateAll('.textify-style1');

// Check if element is animated
if (Textify.isAnimated('.my-text')) {
// Element already animated
}
`

📱 Responsive Design

Textify automatically adapts to different screen sizes:

`css
/ Built-in responsive breakpoints /
@media (max-width: 480px) {
.textify-style1 .char { transform: scale(0.8); }
}

@media (max-width: 768px) {
.textify-style8 .char { animation-duration: 1.5s; }
}
`

🎯 Performance Optimization

$3

1. Limit simultaneous animations: Don't animate more than 3-4 text elements at once
2. Use once: true: Prevent re-triggering on scroll
3. Optimize for mobile: Reduce animation complexity on smaller screens
4. Preload fonts: Ensure fonts are loaded before animation starts

$3

`javascript
// Enable performance monitoring
Textify.init({
performance: true, // Logs animation performance
maxConcurrent: 3 // Limit concurrent animations
});
`

🔧 Browser Support

| Browser | Version | Support |
|---------|---------|---------|
| Chrome | 60+ | ✅ Full |
| Firefox | 55+ | ✅ Full |
| Safari | 12+ | ✅ Full |
| Edge | 79+ | ✅ Full |
| IE | 11 | ❌ Not Supported |

🚀 Examples

$3


`html

Welcome to the Future

Experience text like never before

`

$3

`html

Premium Product

$99.99

`

$3

`html

`

🛠️ Development

$3

`bash


Clone the repository

git clone https://github.com/mkk360/textify.git
cd textify

Install dependencies

npm install

Build for production

npm run build

Watch for changes

npm run dev
`

$3

`
textify/
├── dist/
│ ├── textify.min.js
│ └── textify.css
├── src/
│ ├── textify.js
│ ├── animations.js
│ └── styles.css
├── examples/
│ ├── basic.html
│ ├── advanced.html
│ └── demos/
├── tests/
│ └── textify.test.js
├── package.json
└── README.md
``

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

$3

- 🐛 Report a Bug
- 💡 Request a Feature

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

- GSAP - The most robust animation library
- SplitText - Professional text splitting
- Community contributors and feedback

🔗 Links

- 🌐 Live Demo
- 📚 Documentation
- 🎮 Playground
- 💬 Discord Community

---

Made with ❤️ by Md. Mehadi Hassan

⭐ Star this repository if you found it helpful!