Parallax Tilt
Overview
Parallax Tilt shows each object of a data source as a card. When the mouse moves over a card, the card tilts in 3D towards the mouse, grows a little and shows a light reflection (glare). When the mouse leaves, the card returns to its place. It is built on the react-parallax-tilt library.
You design the content of a card in Studio Pro with any widgets: images, text, buttons. The tilt angles, glare, scale, perspective, speed and flip are set in the widget properties, and three events (enter, move, leave) can run an action.
Documentation
Typical usage scenario
Parallax Tilt makes cards react to the mouse: each card tilts in 3D towards the pointer, grows a little and shows a light reflection. It gives lists of objects a modern, interactive look without custom JavaScript or CSS.
- Product, offer or plan cards in a shop or portal.
- Image galleries and portfolios.
- Dashboard tiles and menu cards that react to the mouse.
- Profile or team cards.
Features and limitations
Features
- One card per object of any data source (database, microflow, nanoflow, association).
- Any Mendix widgets as card content.
- Tilt on the x-axis and y-axis with separate maximum angles (0–90 degrees).
- Glare with color, position (top, right, bottom, left, all) and maximum opacity.
- Scale on hover, perspective, transition speed and easing.
- Flip vertically or horizontally.
- Horizontal layout (a row that wraps on small screens) or vertical layout (a column).
- On enter, on move and on leave actions.
- CSS classes for the container, the cards and the content, so a theme can restyle them.
Limitations
- Web only; not available for native mobile.
Dependencies
- Mendix Studio Pro 10.24.17 or a later versions.
Installation
1. Download MxTechies.ParallaxTilt.mpk from the Marketplace (or from the GitHub release Version1.1.0).
2. Copy it into the widgets folder of your app (App > Show App Directory in Explorer).
3. In Studio Pro, press F4 (App > Synchronize App Directory).
4. The widget appears in the Toolbox as Parallax Tilt.
Configuration
1. Drag Parallax Tilt onto a page.
2. Select the Data source; one card is shown for each object.
3. Drop the content of a card into the widget, for example an image, a text and a button.
4. Choose the Orientation: horizontal (row) or vertical (column).
5. On the Configurations tab, adjust the effect. The defaults (angles 20, scale 1.1, perspective 1000, white glare at the top with opacity 0.7) work well for most cards.
6. Optionally select actions on the Events tab.
Recommended settings:
- Subtle hover: angles 10, scale 1.05, glare max opacity 0.3.
- Strong 3D: angles 25, perspective 600, scale 1.15.
- Tilt only left and right: Max tilt angle X 0, Max tilt angle Y 20.
- Glare only: Tilt enabled No.
Styling: the outer element has the classes widget-parallaxtilt and widget-parallaxtilt-horizontal or widget-parallaxtilt-vertical; each card is widget-parallaxtilt-card and its content widget-parallaxtilt-content.
Known bugs
None.
Please refer https://github.com/bharathidas/ParallaxTilt/issues
Frequently Asked Questions
Why does my card tilt in only one direction?
In version 1.0.0 the orientation decided which angle was used. Upgrade to 1.1.0; both angles now apply. Set one angle to 0 to tilt in one direction only.
Why do my cards look washed out or white when the mouse is not over them?
That is the glare bug of version 1.0.0 (vertical orientation with glare position top, bottom or all, or horizontal orientation with left, right or all). Upgrade to 1.1.0.
How do I make the cards the same width?
In the horizontal orientation the cards share the width (minimum 200 pixels each). For a fixed width, add this to your theme:
.widget-parallaxtilt-horizontal > .widget-parallaxtilt-card { flex: 0 0 260px; }
Can I use a coloured glare?
Yes. Enter any CSS color in Glare color, for example rgb(255, 215, 0).
How do I react to a click on a card?
Put a button in the card content, or give a container in the content an On click action. The widget events (enter, move, leave) do not receive the object of the card.
Releases
Parallax Tilt 1.1.0 for **Mendix Studio Pro 10.24.17** (web).
## Compatibility
- Mendix Studio Pro 10.24.17 or a later 10.24 version, web profiles only.
- Built with `@mendix/pluggable-widgets-tools` 10.16.0 and React 18.
- Uses react-parallax-tilt 1.7.345. The package is about 17 KB (1.0.0: about 57 KB).
- The widget ID and property keys are the same as in 1.0.0, so existing pages keep their settings.
## Changes and fixes
- Both tilt angles work in both orientations. In 1.0.0 the horizontal orientation used only Max tilt angle X and the vertical orientation only Max tilt angle Y.
- The glare no longer stays fully visible when a card is not hovered. In 1.0.0 this happened in the vertical orientation (glare position top, bottom or all) and in the horizontal orientation (left, right or all).
- Glare color, glare position and transition easing are optional (defaults `#ffffff`, `top`, `cubic-bezier(.03,.98,.52,.99)`). The glare position ignores case and spaces.
- Angles are limited to 0–90 and glare opacity to 0–1; a scale or perspective of 0 or less uses 1 and 1000.
- The CSS classes start with `widget-parallaxtilt`. 1.0.0 added global styles for the classes `content` and `slide`.
- Horizontal cards share the width and wrap on small screens.
- The class and style set in Studio Pro are applied.
- The On move action does not start again while it is still running.
- Studio Pro design mode shows a card with a drop zone for the content.
- Clearer captions and descriptions.
- Widget source code is in the repository folder `parallaxTilt`; documentation, cover and screenshots in `docs`.
Tested in a Mendix 10.24.17 app (33 automated checks): both orientations, tilt on X and Y, angle 0, scale, perspective, glare color, position and opacity, tilt and glare off, flip, empty and out-of-range values, and wrapping on a narrow window.
## Install
1. Download `MxTechies.ParallaxTilt.mpk` below.
2. Copy it into the `widgets` folder of your app and press **F4** (App > Synchronize App Directory).
3. Place **Parallax Tilt** on a page, select a data source and drop the card content into it.
## Upgrade from 1.0.0
1. Replace the old `MxTechies.ParallaxTilt.mpk` in the `widgets` folder and press **F4**.
2. Studio Pro reports that the widget definition changed. Right-click the error and choose **Update all widgets**. Your settings are kept.
3. If the running app still shows the old widget, stop it, choose **App > Clean Deployment Directory** and run it again.
Check after upgrading: both angles now apply. For the old one-axis tilt, set Max tilt angle Y to 0 (horizontal) or Max tilt angle X to 0 (vertical).
## Previous version
[Version1.0.0](https://github.com/bharathidas/ParallaxTilt/releases/tag/Version1.0.0) – widget 1.0.0 for Mendix 10.18.3.