Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Text Animations
Text animation components are dynamic UI elements that bring motion and interactivity to text, enhancing the visual appeal and engagement of content within an interface.
Typer
Creates a realistic typing effect using the Typed.js library. Perfect for hero sections, landing
pages, or anywhere you want to draw attention to key messages. Configure typing speed with
data-type-speed, backspace speed with data-back-speed, and multiple
strings with data-strings (comma-separated). Set data-loop="false" to
type once or data-loop="true" for continuous cycling.
Typer with loop
A continuous version of the typing effect that cycles through multiple phrases. The text types out completely, pauses briefly, then backspaces and starts the next phrase. Ideal for showcasing multiple features, benefits, or concepts in a dynamic way. The loop creates an engaging, ever-changing message that keeps users' attention.
Text fade
Smooth fade transitions between different text phrases. Each text string appears with a gentle fade-in effect, remains visible for a few seconds, then fades out before the next string appears. This creates a subtle, elegant way to cycle through multiple messages without the mechanical feel of typing effects. Perfect for testimonials, feature highlights, or rotating taglines.
Slide Text
Text slides in from the left side of the container, creating a dynamic entrance effect. Uses CSS transforms and animations for smooth motion. Great for revealing important information or creating visual interest when content loads. The sliding motion draws the eye and creates a sense of movement and energy on the page.
Bounce Text
Text appears with a playful bounce effect, starting small and scaling up with a slight overshoot before settling into place. This animation adds personality and energy to your content, making it feel more dynamic and engaging. Perfect for call-to-action text, announcements, or any content that should feel exciting and energetic.
Character Reveal
Each character appears individually with a staggered animation, creating a wave-like reveal effect across the text. Characters slide up from below while fading in, with each letter delayed slightly from the previous one. This creates an elegant, sophisticated animation that's perfect for headlines, important announcements, or any text that deserves special attention.
Glow Text
Text pulses with a glowing effect that alternates between subtle and intense illumination. Uses CSS text-shadow to create the glow effect, which continuously animates to draw attention. Perfect for highlighting special offers, important announcements, or creating a futuristic, high-tech aesthetic. The glow effect works especially well with primary or accent colors.
On this page