Carousel with swipe effect

Overview

A carousel is a container of widgets where users can swipe between views horizontally or vertically.

The swipe effect in the carousel widget is achieved by the following steps:

Drag and drop the carousel widget and select the type. (In this case, horizontal)

Carousel widget

Create new placeholder information and add views to the carousel’s placeholder.

Carousel Placeholder

Adding views to Carousel’s Placeholder

Now map the placeholder under the properties -> Advanced properties -> Placeholder ID.

Assigning Placeholder to Carousel widget

Go to the animation tab of the carousel view widget. Now right click under Animation and select Add Animation -> Child Change.

Child change Animation

Now enter Animation Name and ID, select Trigger Action Type as Swipe Left and enter the total duration and click Ok.

Similarly, set up an animation for Swipe Right.

Now select the swipe left animation and go to Animation Editor tab. Right click on Entry child type and select Add Transition.

Swipe Left Animation transition for Entry Child

Select Transition type as Linear, Transition Change as X position (for Horizontal type swipe) and Start and End value as 400 and 0 respectively.

Enter Start and End duration as 0 and 1000 respectively.

Swipe Left Animation transition effect for Entry Child

Next Right click on Exit child type and select Add Transition.

Select Transition type as Linear, Transition Change as X position (for Horizontal type swipe) and Start and End value as 0 and -400 respectively.

Enter Start and End duration as 0 and 990 respectively. Set the visibility and X position as 0 in the last 10ms.

Swipe Left Animation transition for Exit Child

Now select the swipe right animation and go to Animation Editor tab. Right click on Entry child type and select Add Transition.

Select Transition type as Linear, Transition Change as X position (for Horizontal type swipe) and Start and End value as -400 and 0 respectively.

Enter Start and End duration as 0 and 1000 respectively.

Swipe Right Animation transition effect for Entry Child

Next Right click on Exit child type and select Add Transition.

Now select Transition type as Linear, Transition Change as X position (for Horizontal type swipe) and Start and End value as 0 and 400 respectively.

Enter Start and End duration as 0 and 990 respectively. Set the visibility and X position as 0 in the last 10ms.

Download a sample project for the carousel with swipe effect from the Downloads Section .

Here’s a summarized explanation of what’s happening:

For the Swipe Left animation :

As one view enters the screen, it moves from the right (an initial X-position of 400) to fill the screen (final X-position of 0). Simultaneously, the currently visible view exits to the left (moving from X-position 0 to -400), but this transition almost completes in 990ms, with the final touch of making it invisible and resetting its position in the last 10ms.

For the Swipe Right animation :

As one view enters the screen, it moves from the left (an initial X-position of -400) to fill the screen (final X-position of 0). The currently visible view exits to the right (moving from X-position 0 to 400), and similar to the swipe left, the main movement completes in 990ms, followed by the final adjustments in the last 10ms. The idea behind these animations is to make the transitions smooth and mimic natural swipe gestures, with both entry and exit animations playing simultaneously to provide the illusion of continuous movement. The slight difference in end durations (990ms vs. 1000ms) and the final 10ms adjustment likely ensures that views are positioned and displayed correctly at the end of the animations.

Note: It is recommended to manipulate the child views of the carousel using a data variable mapped to the carousel. Directly handling the carousel’s views outside of its context, without using the mapped data variable, is not advised, as it may cause unexpected behavior in view visibility.