Help needed: Zoom an image inside a repeater while hovering it

Ask the community
,
1

Hi everyone!
I set up a repeater and connected it to a dataset and also added a few items. Everything works fine and all the items/pages appear correctly in my repeater.

What I’m trying to do, is add a “zoom” effect to the images inside the repeater when I hover the mouse over them.

Looking at some Wix corvid examples, I was able to set up a working zoom effect using the following code:

import {timeline} from 'wix-animations'
 

$w.onReady(function () {

 const target1 = $w('#repeaterImage');

    $w('#repeaterImage').onMouseIn(() => {

    timeline()
        .add(target1, {y: 0, x: 0, scale: 0.95, duration: 500, easing: 'easeOutCirc'})
        .play()
})

$w('#repeaterImage').onMouseOut(() => {

 const reset = {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'};

    timeline()
        .add(target1, reset)
        .play()
})

});

The only issue with this code is that when I hover the mouse over one of the images, all images inside the repeater are zoomed.

Can anyone help me set up the code so just the image I hover the mouse on gets a zoom effect?
Thanks in advance.

2

When you use repeaters in Wix, you need to code it so that the repeater knows to do for each item otherwise it will repeat itself for all the containers inside that repeater.

https://www.wix.com/corvid/reference/$w.Repeater.html
Modify repeater items using Wix Code

3

This makes sense. Thanks for helping!

4

So I followed the tutorial you linked me and I was able to make it so the console log tells me which image I hovered the mouse on using this code:

import wixData from 'wix-data'

export function toolsDataset_ready() {
    makeRepeater();
}

export function makeRepeater () {
    $w('#toolsRepeater').forEachItem( ($item, itemData, index) => {
        $item("#toolsRepeaterTitle").text = itemData.title;
        $item('#toolsRepeaterImage').onMouseIn( (event) => {
            console.log("Hovered " + itemData.title)
        });
    });
}

I’ve been trying to apply the animation to the selected image but I have no idea what to insert.
I tried to copy/paste the old code I posted in the question but of course, this still animates all the images in the repeater because the “const” selects all the images in the repeater:

import wixData from 'wix-data'
import {timeline} from 'wix-animations'
const target1 = $w('#toolsRepeaterImage');

export function toolsDataset_ready() {
    makeRepeater();
}

export function makeRepeater () {
    $w('#toolsRepeater').forEachItem( ($item, itemData, index) => {
        $item("#toolsRepeaterTitle").text = itemData.title;
        $item('#toolsRepeaterImage').onMouseIn( (event) => {
            console.log("Hovered " + itemData.title)
            timeline()
            .add(target1, {y: 0, x: 0, scale: 0.98, duration: 500, easing: 'easeOutCirc'})
            .play()
        });
    });
}

Of course, there must be a piece of code that lets me apply the animation to the image I hovered the mouse on, but since I started using corvid literally 2 days ago, I have no idea what to use :confused:

On this part of the code how can I change “target1” with something that triggers only the image I hover the mouse on?

.add(target1, {y: 0, x: 0, scale: 0.98, duration: 500, easing: 'easeOutCirc'})

Thanks in advance.

5

Is there anyone that can help me with this? I checked the documentation and I found out that I have to use $w.at() but I have no idea how to combine it with the animation event.

Here’s the code I have so far (which doesn’t work), can anyone help me arrange it so it works correctly?

import {timeline} from 'wix-animations'

$w.onReady(function () {
 let $item = $w.at();
    $w('#repeaterImage').onMouseIn(() => {
    timeline()
        .add($item, {y: 0, x: 0, scale: 0.98, duration: 500, easing: 'easeOutCirc'})
        .play()
})

$w('#repeaterImage').onMouseOut(() => {
 const reset = {y: 0, x: 0, scale: 1, duration: 500, easing: 'easeOutCirc'};
    timeline()
        .add($item, reset)
        .play()
})
});
6

hey have you figured this out?

7

I’m also intersested by this solution :wink: