☰
Trongate MX Docs
Introduction
Core HTTP Operations
Swapping Content
Events & Responses
Dynamic Form Handing
UI Enhancements
Data Management
Form Handling
Advanced Features
Trongate MX Security
Reference

Success Animations

The mx-animate-success attribute triggers a checkmark animation when an API endpoint returns an HTTP success status code that's in the 'success' range (i.e., 200 - 299).

Demonstration

Click the button below to see an example of a 'success' animation:

How It Works

The mx-animate-success attribute attaches a success animation to elements initiating HTTP requests, such as buttons or forms. When the request succeeds, users see a checkmark animation, giving immediate feedback that the operation was successful.

Example

Here's how you can implement mx-animate-success:

For an HTML-only approach, here's the corresponding code:

Clicking the submit button sends a POST request to endpoint/submit. If the request succeeds (HTTP status 200-299), the checkmark animation is displayed over the form.

Important: The mx-animate-success attribute must be added to the element initiating the HTTP request. Adding it to unrelated elements will not trigger the animation.

Syntax

The syntax for mx-animate-success is simple:

Setting the attribute value to "true" activates the animation.

Placement Rules

The placement of the success animation depends on the context:

  • Default: The animation appears inside the element that contains the mx-animate-success attribute.
  • Modals: If the element that contains the mx-animate-success attribute is inside a modal, the animation will be rendered within the containing modal body - temporarily hiding the entire contents of the modal body.

Tip: Use mx-animate-success alongside mx-post for a seamless combination of server-side operations and client-side feedback.

Advanced Example

Here's a practical example combining mx-animate-success with other MX attributes:

If you'd rather work with pure HTML, here's the code:

In this example:

  1. The form submits data to submit_data via AJAX.
  2. Upon success, a checkmark animation appears within the form.
  3. After a second or two, the animation disappears.
  4. The response text, from the API, is then inserted inside the #response element.

The 'autocomplete' attribute, when set to 'off' on a form's opening tag, prevents the browser from suggesting or automatically filling in previously entered values for any of the form fields. This is especially useful for forms that collect sensitive or unique information, as it ensures the browser won't try to pre-fill fields with stored data.

Things To Keep In Mind

  • The animation is purely client-side and does not confirm server-side changes.
  • It works with clickable elements such as buttons and form elements.
  • For advanced error handling, consider pairing with attributes like mx-redirect-on-error.

Summary

The mx-animate-success attribute provides immediate feedback for successful operations. It can be used with buttons, forms, or modals, and works alongside other Trongate MX attributes to create interactive experiences.

Best Practices:

  • Add mx-animate-success="true" to elements initiating HTTP requests.
  • Combine with mx-post for AJAX-driven forms or buttons.