Advanced GSAP SplitText Animation Plugin with 20+ stunning text animation styles
npm install textify-gsap> Transform your text into stunning animated experiences with 20+ professionally crafted animation styles.




``bash`
npm install textify-gsap
`html
`
` Pulse Glow EffecthtmlHello World
Floating Particles
`
| Style | Class | Effect | Best For |
|-------|-------|---------|----------|
| 1 | textify-style1 | Particle Explosion | Headlines, Impact Text |textify-style2
| 2 | | Explosive Zoom | Call-to-Action, Buttons |textify-style3
| 3 | | Wave Up | Subtitles, Descriptions |textify-style4
| 4 | | 3D Flip | Modern Headings |textify-style5
| 5 | | Bounce Scale | Playful Text |textify-style6
| 6 | | Spiral Zoom | Logo Text |textify-style7
| 7 | | Stretch Left | Navigation Items |textify-style8
| 8 | | Float Particles | Background Text |textify-style9
| 9 | | Typewriter | Code, Tech Content |textify-style10
| 10 | | Magnetic Pull | Interactive Elements |textify-style11
| 11 | | Flare Burst | Announcements |textify-style12
| 12 | | Ripple Wave | Smooth Reveals |textify-style13
| 13 | | Matrix Fall | Cyberpunk, Tech |textify-style14
| 14 | | Flip Carousel | Product Names |textify-style15
| 15 | | Pulse Glow | Neon, Gaming |textify-style16
| 16 | | Stagger Zoom | Lists, Menus |textify-style17
| 17 | | Wave Fold | Artistic Text |textify-style18
| 18 | | Sine Spray | Abstract, Creative |textify-style19
| 19 | | 3D Grid | Complex Layouts |textify-style20
| 20 | | Glow Trail | Magical, Fantasy |
Customize any animation using HTML data attributes:
`html
data-duration="3"
data-ease="power1.out">
Slow Explosion
$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 textifyInstall dependencies
npm installBuild for production
npm run buildWatch 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
``We welcome contributions! Please see our Contributing Guide for details.
- š Report a Bug
- š” Request a Feature
MIT License - see LICENSE file for details.
- GSAP - The most robust animation library
- SplitText - Professional text splitting
- Community contributors and feedback
- š Live Demo
- š Documentation
- š® Playground
- š¬ Discord Community
---
Made with ā¤ļø by Md. Mehadi Hassan
ā Star this repository if you found it helpful!