FlippableCard

The FlippableCard widget provides the visual interaction called 'Flip card animation'. Initially, it shows the front side of the card, and when you tap on it, it shows the back side.

You could use this widget to show and hide details of an item (e.g., credit card, online course card, coupon card, etc.)

To add the FlippableCard widget:

First, click on the + Add Widget and drag the FlippableCard widget from the Layout Elements tab or add it directly from the widget tree.
Select the Card Front from the widget tree and customize or replace the Container with the widget of your choice. For example, replacing it with a Credit Card widget (under the Templates > Card Views).
To edit the back side of the card, select the FlippableCard, move to the properties panel, scroll down to the Flippable Card Properties and enable the Edit Back of Card.
Now select the Card Back from the widget tree and customize or replace the Container with the widget of your choice. For example, again, add the Credit Card widget and customize it to show the details.

Customizing

You can customize the appearance of this widget using the various properties available under the properties panel.

Changing flip direction

By default, this widget flips the card in the horizontal direction (i.e., from left to right and right to left).

To change the flip direction:

Select the FlippableCard widget from the widget tree or canvas area.
Move to the properties panel, and scroll down to the Flippable Card Properties section.
Find the Flip Direction dropdown and change it to Horizontal or Vertical.

Changing flip animation duration

When you tap on this widget, the flip animation completes in 400ms (milliseconds). You can change this duration if you wish to make it a little faster or slower.

To change the flip animation duration:

Select the FlippableCard widget from the widget tree or canvas area.
Move to the properties panel, and scroll down to the Flippable Card Properties section.
Find the Flip Animation Duration property and change the value. Note: The value should be in milliseconds (e.g., 1000ms = 1 second).

Disable flip on tap

By default, the card flips when you tap on it. To disable this behavior:

Select the FlippableCard widget from the widget tree or canvas area.
Move to the properties panel, and scroll down to the Flippable Card Properties section.
Find the Flip on Tap toggle and disable it.