MX Web Animations
Overview
MX Web Animations is a custom Mendix widget designed to enhance the user interface of Mendix applications by providing modern and customizable web animations. It allows developers and designers to easily apply animation effects to UI elements without requiring complex JavaScript or CSS implementation.
The widget includes support for up to 25 different animation types, enabling users to create engaging and visually appealing application interfaces. These animations can be applied to various UI components such as containers, buttons, text elements, images, or sections within a page.
To provide flexibility, the widget offers several customization options, including animation duration, delay, and repeat count. Developers can also configure animations to run in an infinite loop when needed. These options allow precise control over how and when animations appear within the application.
A key feature of MX Web Animations is its viewport-based animation triggering. This functionality enables animations to respond dynamically based on the user's interaction with the page. Developers can configure the widget to trigger animations in two different ways:
- Page Load Animation – The animation runs once when the page loads.
- Scroll Trigger Animation – The animation starts when the element enters the viewport during user scrolling.
This capability helps create modern user experiences commonly seen in interactive websites and dashboards, where elements smoothly appear as users scroll through the page.
To demonstrate and validate the functionality of the widget, a demo application has been created with several sample pages. These pages showcase different animation styles, configuration options, and viewport-based behaviors, helping developers quickly understand how to implement the widget in their Mendix projects.
Use Cases
MX Web Animations can be used in many scenarios, including:
- Enhancing landing pages and marketing pages
- Creating interactive dashboards
- Highlighting important UI components
- Adding smooth section reveal effects
- Improving overall user experience and visual engagement
By simplifying the process of implementing animations in Mendix, MX Web Animations helps teams build modern, dynamic applications while maintaining clean and manageable development workflows.
Documentation
MX Web Animations is a custom Mendix widget designed to enhance the user interface of Mendix applications by providing modern and customizable web animations. It allows developers and designers to easily apply animation effects to UI elements without requiring complex JavaScript or CSS implementation.
The widget includes support for up to 25 different animation types, enabling users to create engaging and visually appealing application interfaces. These animations can be applied to various UI components such as containers, buttons, text elements, images, or sections within a page.
To provide flexibility, the widget offers several customization options, including animation duration, delay, and repeat count. Developers can also configure animations to run in an infinite loop when needed. These options allow precise control over how and when animations appear within the application.
A key feature of MX Web Animations is its viewport-based animation triggering. This functionality enables animations to respond dynamically based on the user's interaction with the page. Developers can configure the widget to trigger animations in two different ways:
- Page Load Animation – The animation runs once when the page loads.
- Scroll Trigger Animation – The animation starts when the element enters the viewport during user scrolling.
This capability helps create modern user experiences commonly seen in interactive websites and dashboards, where elements smoothly appear as users scroll through the page.
To demonstrate and validate the functionality of the widget, a demo application has been created with several sample pages. These pages showcase different animation styles, configuration options, and viewport-based behaviors, helping developers quickly understand how to implement the widget in their Mendix projects.
Use Cases
MX Web Animations can be used in many scenarios, including:
- Enhancing landing pages and marketing pages
- Creating interactive dashboards
- Highlighting important UI components
- Adding smooth section reveal effects
- Improving overall user experience and visual engagement
By simplifying the process of implementing animations in Mendix, MX Web Animations helps teams build modern, dynamic applications while maintaining clean and manageable development workflows.
Releases
Overview
MX Web Animations is a custom Mendix widget designed to enhance the user interface by adding smooth and customizable web animations to page elements. The widget provides multiple animation styles with flexible configuration options, enabling both developers and designers to create more engaging and interactive applications without writing complex animation code.
This widget supports up to 25 animation types and allows full control over animation behaviour such as duration, delay, repeat count, and infinite looping.
Additionally, the widget includes viewport-based animation triggering, allowing animations to start when elements appear in the user's screen while scrolling.
Key Features
Multiple Animation Types
The widget includes 25 different animation styles that can be applied to UI elements to improve the visual experience.
Examples include:
- Fade In
- Slide Up
- Slide Down
- Zoom In
- Bounce
- Flip
- Rotate
- And many more.
Customizable Animation Settings
Developers can configure the animation behaviour directly from the widget properties:
- Animation Duration – Control how long the animation runs.
- Animation Delay – Add delay before the animation starts.
- Repeat Count – Define how many times the animation should repeat.
- Infinite Loop – Option to run the animation continuously.
Viewport-Based Animation Trigger
The widget supports scroll-based animation triggering using viewport detection.
Two options are available:
1. Page Load Animation
Animation runs once when the page loads based.
2. Scroll Trigger Animation
Animation runs when the element enters the viewport during user scrolling.
This helps create modern scroll-based UI effects commonly used in modern web applications.