<b>Step 1: Add the Plugin</b> Drag and drop the Text Animation Decode plugin into your Bubble.io editor.
Place it on the page where you want the animated text to appear.

Step 2: Configure the Settings
* HTML IDs : Enter the IDs of the text elements you want to animate. Separate multiple IDs with commas (e.g., text1, text2). Enable this in Settings > General > "Expose the option to add an ID attribute to HTML elements"

* Font Selection : Choose a monospace font from the dropdown or type in your preferred font name. If no font is selected, the plugin defaults to IBM Plex Mono .
Animation Direction : Select whether the text should reveal from left-to-right or right-to-left .
* Step Size : Adjust the step size to control how many characters are revealed at a time. Smaller values create smoother animations.
* Delay : Set a delay (in milliseconds) before the animation starts. Use this to time the animation perfectly with other elements on your page.
* Blur Effect : Enable the blur effect for a futuristic look. Adjust the blur intensity to suit your design.
* Enable Monospace Font : Toggle this option to apply a monospace font to your text. Disable it if you want to use the default font applied in Bubble.io.

Step 3: Style Your Text Elements
* Ensure the text elements you want to animate have unique IDs in Bubble.io. You can set an ID by selecting the element, going to the Properties tab, and entering a value in the ID field.
* Pre-style your text elements in Bubble.io (e.g., font size, color, alignment). The plugin will override only the font family and visibility settings during the animation.

Step 4: Preview and Test
* Preview your page to see the animation in action.
* Adjust the settings as needed to achieve the desired effect.

Tips for Best Results
Use short phrases or headings for the best visual impact.
Combine the plugin with other interactive elements (e.g., buttons, hover effects) to create a cohesive user experience.
Test the animation on different devices and browsers to ensure compatibility.