MARKETPLACE
PLUGINS
TEXT ANIMATION - UNDERLINE
Text Animation - Underline logo

Text Animation - Underline

Published April 2025
   •    Updated March 2026

Plugin details

Adds a customizable animated underline effect to any text element by ID. Supports adjustable thickness, distance from the text, and animation direction (left-to-right, right-to-left, or center-out). Ideal for adding modern, interactive styling to headings, links, or calls to action.
🔗Demo Page: https://dbp-plugins.bubbleapps.io/version-test/text_animation_underline

🔗Editor: https://bubble.io/page?id=dbp-plugins&tab=Design&name=text_animation_underline&type=page

$7

One time  •  Or  $2/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

DBP Plugins logo
DBP Plugins
Joined 2019   •   5 Plugins
View contributor profile

Instructions

1. Enable ID Attribute In your Bubble editor, go to:
Settings → General → ✅ Check "Expose the option to add an ID attribute to HTML elements."

2. Add ID(s) to Text Elements
For each element you want to animate, enter a unique ID (e.g., link1, my-title) in the ID Attribute field in the property editor.

3. Drop the Plugin Element on the Page
Drag the plugin element into your page (preferably near the bottom of the page or inside a reusable element).

4. Configure Plugin Fields

element_id: A list of one or more element IDs (comma- or newline-separated)

thickness: Thickness of the underline in pixels (default: 2)

distance: Distance in pixels between the underline and the bottom of the element (default: 0)

animation_style: Direction of animation
→ Options: "left-to-right" (default), "right-to-left", "in-to-out"

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble