Help needed rearranging some code for repeaters

Ask the community
,
1

Hi everyone,
I’m currently trying to make it so an image inside my repeater slightly zooms out when I hover the mouse over it.

Some time ago I used a code that replicates the effect I wanted BUT it zooms out all images inside the repeater. This is the faulty code I used:

import {timeline} from 'wix-animations'
 
$w.onReady(function () {
 const target1 = $w('#repeaterImage');
    $w('#repeaterImage').onMouseIn(() => {
    timeline()
        .add(target1, {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(target1, reset)
        .play()
})
});

By looking into the API documentation, I found out that I have to use $w.at() in order to trigger only the image I hover the mouse on and not all repeated images.
Following the little example in the documentation, I was able to make it so the text inside a box of the repeater changes when I click an image in the same box. It worked fine. Now I tried to use the same code but change the effect so instead of changing text, the image zooms out. Here’s the code but I need help setting it up because I wasn’t able to make it work:

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()
})
});

Thanks in advance!