How to Master Scalable Text Reveal Animations in Webflow

This instructional module details the implementation of Finsweet’s Mirror Input Values solution, a no-code method for synchronizing Webflow input fields in real-time. The tutorial demonstrates how to leverage simple custom attributes to instantly reflect user data from a "trigger" field to a "target" field, thereby creating dynamic and engaging web experiences without requiring complex programming knowledge.

Viewers will learn to configure sophisticated form behaviors by manipulating Webflow custom elements, converting them into read-only inputs or text areas to display dynamic content. The guide specifically covers technical nuances, such as setting the "tag" property to input and applying specific type attributes, enabling developers to build personalized greetings and real-time visual previews effectively.

Beyond basic setup, the video outlines three distinct architectural patterns: creating personalized UI messaging, generating live content previews for items like postcards, and auto-filling complex forms to reduce user error. The lesson concludes with high-level best practices, urging developers to prioritize User Experience (UX) by clearly labeling linked fields and implementing mirroring features only where they genuinely enhance the user journey.

• Attribute-Based Synchronization: The core functionality relies on the fs-mirror input-element attribute, where the input field is assigned a "trigger" value and the receiving field is assigned a corresponding "target" value to establish a link.
• Advanced Custom Element Configuration: To display mirrored text in unique layouts, users must utilize Webflow custom elements by setting the property tag to input and adding attributes such as type="text" or designating them as a text area.
• Scalable Implementation: When implementing multiple synchronized fields on a single page, developers must append unique numerical identifiers to the attribute values (e.g., trigger-2 and target-2) to ensure distinct fields do not conflict.
• Versatile Input Support: This solution extends beyond standard text fields to support text areas, select dropdowns, radio buttons, and checkboxes, allowing for complex data mirroring across different form components.
• Flexible User Control: For functional use cases like address duplication in checkout flows, mirrored target fields can remain editable rather than read-only, allowing users to leverage auto-fill convenience while retaining the ability to modify the data if necessary.

• 02:36 – Add the custom attribute fs-mirror input-element with the value trigger to the primary input field.
• 03:28 – Set the "tag" property to input within the Element Settings panel to convert a Webflow custom element into an input field.
• 03:40 – Add the type attribute with a value of text to define the custom element's functionality.
• 03:59 – Apply the readonly attribute (no value needed) to prevent users from editing the mirrored target field.
• 04:09 – Add the custom attribute fs-mirror input-element with the value Target to the receiving element to establish the link.
• 06:29 – Assign a unique indexed value (e.g., trigger-2) to the attribute when configuring multiple independent triggers on the same page.
• 08:04 – Set the target attribute value to Target-2 to ensure it matches the corresponding trigger's unique index.
• 08:47 – Assign the text area value to the tag property within Element Settings to configure a multi-line input target.
• 12:57 – Apply the mirroring attribute with a matching target value (e.g., Target-5) to a Select input field to synchronize dropdown data.

Technical Guide: Implementing Real-Time Input Mirroring in Webflow

This guide outlines the step-by-step process for syncing input fields in real-time using the Finsweet Mirror Input Values solution. Follow these instructions to create dynamic user experiences such as personalized greetings, live content previews, and auto-filling forms.

Step 1: Define the "Trigger" Input Field

Reference Timestamp: 02:29 – 02:47

• How: Select the primary input field (e.g., a "Name" text field) where the user will type data. Navigate to the Element Settings panel in Webflow. Add a custom attribute with the name fs-mirror input-element and set the value to trigger.
• Why: This establishes the input field as the "source" of the data. The script monitors this specific field for keystrokes to mirror elsewhere.

Step 2: Configure a Custom Element as a Target

Reference Timestamp: 03:10 – 03:33

• How: Select a Webflow Custom Element (not a standard Form Block input) where you want the text to appear. In the Element Settings panel under "Input Settings" set the Tag property to input.
• Why: Using a custom element allows for greater design flexibility within the UI (like embedding a name inside a sentence) without the default styling constraints or behaviors of a standard form input block.

Step 3: Define Input Type and Read-Only Status

Reference Timestamp: 03:40 – 04:02

• How: With the target custom element still selected, add a custom attribute named type with a value of text. Then, add the attribute readonly (no value is required).
• Why: The type="text" attribute ensures the browser renders the custom element as a text field. The readonly attribute prevents users from manually editing the mirrored text, ensuring it only reflects what is typed in the trigger field.

Step 4: Link the Target to the Trigger

Reference Timestamp: 04:09 – 04:21

• How: Add the mirroring attribute fs-mirror input-element to the target element, but this time set the value to Target.
• Why: This creates the connection between the two elements. The script matches the element with the value trigger to the element with the value Target to synchronize the data instantly.

Step 5: Implement Multiple Independent Triggers (Indexing)

Reference Timestamp: 06:00 – 07:02

• How: When creating a second set of synced fields on the same page (e.g., a "Message" field separate from the "Name" field), append a unique number to the attribute value. Set the new trigger’s attribute value to trigger-2 (or trigger-3, etc.).
• Why: Unique indexing ensures that different input streams do not conflict. For example, typing in the "Name" field (trigger-2) should not update the "Message" preview (trigger-3).

Step 6: Link Indexed Targets to Specific Triggers

Reference Timestamp: 08:04 – 08:34

• How: On the destination element, set the attribute value to match the specific trigger's index. For example, if the source is trigger-2, the destination attribute must be Target-2.
• Why: The numeric suffix acts as a unique ID, ensuring the script routes the data to the correct location on the page.

Step 7: Configure Text Areas for Long-Form Content

Reference Timestamp: 08:47 – 09:15

• How: If the target needs to display multi-line text (like a postcard message), go to the Element Settings panel and set the Tag property to text area instead of input. Then apply the corresponding target attribute (e.g., Target-3).
• Why: The input tag is designed for single-line text. The text area tag allows the element to expand and wrap text correctly for longer messages.

Step 8: Sync Complex Inputs (Select Fields & Editability)

Reference Timestamp: 11:00 – 12:57

• How: To mirror dropdown menus, select the source "Select" field and apply the trigger attribute (e.g., trigger-5). Apply the matching Target-5 attribute to the destination Select field. For use cases like "Shipping same as Billing," do not add the readonly attribute to the target.
• Why: This solution supports various input types, including Select dropdowns, radio buttons, and checkboxes. Leaving the target editable allows users to utilize the auto-fill convenience while retaining the ability to manually override the data if necessary (e.g., if the billing address differs from shipping).

To build scalable text reveals, use Webflow Custom Elements to generate span tags for individual characters and apply a base class with display: inline-block and a CSS transform transition,. Instead of manually sequencing movements in the interaction panel, control the timing by adding a style attribute to each element with a specific transition-delay value (e.g., 100ms). This allows you to trigger the entire animation with a single "Move" interaction while maintaining precise, staggered timing.

The most efficient method replaces native heading elements with nested Custom Elements, wrapping each line in a div to maintain proper structure. By relying on CSS transitions rather than absolute timeline delays, you can simply duplicate the line wrapper and adjust the inline transition-delay values for the new characters. This approach automatically accommodates longer text or additional lines without requiring you to rebuild the interaction logic.

You can decouple timing from the interaction timeline by utilizing the style attribute on Custom Elements to inject inline CSS directly. Assign a transition-delay value to each element (e.g., 0ms, 100ms, 200ms) and ensure the base class has a transform transition applied. When a simple interaction triggers a state change, the CSS transition handles the staggering automatically, significantly reducing code bloat and setup time.

Set your button's text wrapper to position: relative with overflow: hidden, then place two sets of text Custom Elements inside: one static and one set to position: absolute with a top offset of 100%. Apply a hover interaction that targets the specific text class to move all character spans -100% on the Y-axis simultaneously. The animation will play smoothly based on the CSS transition and delay properties defined on the base class, creating a seamless loop.