Meet SplitFX
Welcome to SplitFX, a JavaScript Text Animation Plugin
SplitFX is a JavaScript text animation plugin that splits the text of HTML elements into individual units (characters and words) and animates them.
Features
Why Choose SplitFX for Text Animation
Explore SplitFX's powerful features that make creating JavaScript text animations effortless
Demo ProjectsAnimate Text by Chars or Words
You can choose to animate text by chars or words.
Multiple Trigger Options
Animate HTML elements' text in and out on scroll, window load, hover, or click.
Full Animation Control
Full control over animation timing, stagger, stagger direction, and easing.
A Variety of Built-in Text Animations
Choose from a variety of built-in text animations such as fade, typeWriter, and more.
Use Your Custom Text Animations
Build and use your own animations to create text animations tailored to your needs.
Different Stagger Directions
Control the text animation flow with stagger directions such as forward, backward, centerOut, random, and more.
Sequential Text Animations
Run text animations step by step in a defined sequence, just like the hero of this page.
Supports Nested Elements
Split and animate the text of HTML elements even when they contain nested elements.
Easy to Use
A set of convenience methods that make SplitFX easier to use.
No Dependencies
Built specifically for text animations with zero external dependencies.
Resources
Get Inspired, Learn, and Create with SplitFX
Explore text animation demos, read the documentation, and create JavaScript text animations with the SplitFX Studio.
SplitFX Documentation
Find everything you need to create text animations with SplitFX.
Read Documentation
Pricing
Choose the License That Fits Your Use Case
Choose the license that fits your project whether you're experimenting, building for clients, or creating products for distribution.
Read LicenseFree
Perfect for personal use, learning, or prototyping before committing to a commercial project.- Use in Non-Commercial Projects
- Community technical support
- Attribution is appreciated
$0Regular
For use in one (1) commercial end product (such as a single website or app) for yourself or a single client.- Use in one (1) commercial End Product for yourself or one client
- End product may not be sold or licensed to multiple End Users
- 6 months technical support
- No Attribution required
$9.99/ One-timeExtended
For use in one (1) commercial end product that is sold or licensed to multiple end users (e.g., a template).- Use in one (1) commercial End Product
- End product may be sold or licensed to multiple End Users
- 12 months technical support
- No Attribution required
$29.99/ One-time
| Usage | Non-Commercial only | 1 End Product | 1 End Product |
| Resale & Distribution | Not allowed | Limited to one client / End Product | Allowed to multiple End Users |
| Technical Support | Community only | 6 months | 12 months |
| Attribution | Appreciated | Not required | Not required |
| Best for | Personal projects, learning, or prototyping not for client work or commercial use | One commercial End Product: either for yourself or a single client | A commercial End Product sold or licensed to multiple End Users (e.g., a template) |
FAQ's
Frequently Asked Questions
Find answers to common questions, questions you may have, and helpful tips about SplitFX.
What is SplitFX?
SplitFX is a JavaScript text animation plugin that splits the text of HTML elements into individual characters or words and animates them. It includes a wide range of built-in text animations and gives you control over timing, delays, staggering, easing, and other animation settings.
What is a JavaScript text animation plugin?
A JavaScript text animation plugin is a tool that makes it easier to create animated text effects on websites using JavaScript. SplitFX, for example, is a JavaScript text animation plugin.
How to add text animations to my website?
You can add text animations to your website using a JavaScript text animation plugin such as SplitFX. SplitFX provides an easy way to add text animations to your website.
What text animation effects does SplitFX support?
SplitFX includes a wide variety of built-in text animation effects, including fade, rotate, wipe, typewriter, bounce, shake, swing, blur, and more. You can also customize supported built-in text animations or create your own. See full list of built-in text animations.
Can I create custom text animations with SplitFX?
Yes.
You can customize supported built-in text animations or create your own custom animations when the built-in effects do not meet your needs. SplitFX lets you register custom animations and use them in your configurations.Does SplitFX support text animations on scroll?
Yes.
To animate text on scroll with SplitFX, use theanimateOnScroll()method to trigger animations when an element enters or leaves the viewport.
SplitFX uses the IntersectionObserver API and provides options such as repeat, threshold, root, and rootMargin for controlling when animations are triggered.Is SplitFX beginner-friendly?
Yes.
You can use convenience methods that make SplitFX easier to use, or core methods when you need more control over your custom logic.Do I need any dependencies?
No.
SplitFX is dependency-free and works with plain JavaScript.Can I use SplitFX on elements that contain nested elements?
Yes.
SplitFX allows you to split and animate the text of HTML elements even when they contain nested elements.Can I animate the text of the same HTML element more than once?
Yes.
You can replay animations using Core Methods or configure convenience methods depending on your use case.