How Do I Add Flip Effect In Repeater

Have you ever wanted to enhance the visual appeal of your Wix website by incorporating dynamic and eye-catching animations? Adding a flip effect to elements within a repeater can be a fantastic way to achieve just that! In this tutorial, we'll guide you through the process of creating a captivating flip effect within a Wix repeater, giving your content a modern and interactive touch.

Prerequisite:

Before you start this tutorial, you need to create a Wix site and design a repeater

Step1: Add and design repeater

Add a Container box and place two text boxes inside it.

Now your repeater should be looking like this

Now add image, here the image is added on top of the container, hiding the text container box

Resize the images exactly as the size of container (repeater item)

Step 2: Turn On Developer Mode

To configure the buttons, we need to enable "Dev Mode" in order to write a few lines of simple code.

On the top left of the window hover over Dev mode.

Then click on Turn on Developer Mode

Step 3: Giving ID to elements

Following better coding standards, it is good to rename the 'id' of the elements, in this case, our elements are

container: #container1

container Box(Text box): #box1

image:#image2

Step 4: Code

On the left side of where you renamed the id, you can see the code panel. This is where we are going to write the code.

$w.onReady(function () {
    const flipOptions = { "duration": 400, "delay": 0 };

    function flipElements(event, hideImage) {
        const $item = $w.at(event.context);
        $item("#image2")[hideImage ? 'hide' : 'show']("flip", flipOptions);
        $item("#box1")[hideImage ? 'show' : 'hide']("flip", flipOptions);
    }

    $w("#container1").onMouseIn(event => flipElements(event, true));
    $w("#container1").onMouseOut(event => flipElements(event, false));
});

Step 5: Preview & Publish

On the top right side, click on "Preview" to see if your code is working. If it is working, then you can publish.

Output

You can visit the example website here.