Hi, not a coder so go easy on me. I’m working on a website and I managed to create a repeater with a zoom-in/zoom-out effect when mouse is hovered over the image. My problem is I have 5 elements in the repeater and the alignment does not look nice so I spit into 2 repeaters so I can align 3 elements on top and 2 on the bottom.
The problem is now I can’t figure out how to make my code work for both repeaters…
The code for one repeater:
import { timeline } from 'wix-animations';
$w.onReady(function () {
expandIn();
});
function expandIn() {
const repeating_image = $w('#button1');
const timelines = {};
const easing = 'easeInOutBack';
repeating_image.onMouseIn((event) => {
const $item = $w.at(event.context);
const image = $item('#image16');
const id = event.context.itemId;
if (!timelines[id]) {
timelines[id] = timeline().add(image, { duration: 700, scale: 1.15, easing })
}
timelines[id].replay();
repeating_image.onMouseOut(() => timelines[id].reverse())
});
}
The code I tried for multiple repeaters that is not working:
import wixAnimations from 'wix-animations';
let timeline1 = wixAnimations.timeline();
let timeline2 = wixAnimations.timeline();
$w.onReady(function () {
expandIn();
});
function expandIn() {
const repeating_image1 = $w('#button2');
const repeating_image2 = $w('#button3');
const timelines = {};
const easing = 'easeInOutBack';
repeating_image1.onMouseIn((event) => {
const $item = $w.at(event.context);
const image = $item('#image17');
const id = event.context.itemId;
if (!timelines[id]) {
timelines[id] = timeline1().add(image, { duration: 700, scale: 1.15, easing })
}
timelines[id].replay();
repeating_image1.onMouseOut(() => timelines[id].reverse())
});
repeating_image2.onMouseIn((event) => {
const $item = $w.at(event.context);
const image = $item('#image18');
const id = event.context.itemId;
if (!timelines[id]) {
timelines[id] = timeline2().add(image, { duration: 700, scale: 1.15, easing })
}
timelines[id].replay();
repeating_image2.onMouseOut(() => timelines[id].reverse())
});
}
Any help is much appreciated 
Hello tali,
the code-part with just one repeater works for you?
If yes, then why not trying do do something like that…
$w.onReady(function () {
expandIn1();
expandIn2();
expandIn3();
});
Do you know what i mean? For each repeater its own function, called by “onReady”.
I’m not sure if this will work in your case, because i just overflew quickly your code.
Thanks Dima, but it doesn’t work 
Yes the first code works perfectly if I have only one repeater
Hi Dima, good news, I managed 
The code is as follows:
import { timeline } from 'wix-animations';
$w.onReady(function () {
expandIn();
});
function expandIn() {
const repeating_image1 = $w('#button2');
const repeating_image2 = $w('#button3');
const timelines = {};
const easing = 'easeInOutBack';
repeating_image1.onMouseIn((event) => {
const $item = $w.at(event.context);
const image = $item('#image17');
const id = event.context.itemId;
if (!timelines[id]) {
timelines[id] = timeline().add(image, { duration: 700, scale: 1.15, easing })
}
timelines[id].replay();
repeating_image1.onMouseOut(() => timelines[id].reverse())
});
repeating_image2.onMouseIn((event) => {
const $item = $w.at(event.context);
const image = $item('#image18');
const id = event.context.itemId;
if (!timelines[id]) {
timelines[id] = timeline().add(image, { duration: 700, scale: 1.15, easing })
}
timelines[id].replay();
repeating_image1.onMouseOut(() => timelines[id].reverse())
});
}
In case you’re wondering what the issue was, it’s because you used the global scoop $w on repeated elements instead of the $item scoop.
Hi Ahmad, can you show me on the code? When I tried to change it I got an error that $item is not defined and when defined that it was already defined…
$item is selector defined in repeaters as the a parameter, so you can’t define it again, and you can only use it to select elements inside the repeater.
To select elements inside the repeater from outside the repeater’s onItemReady() function, you need to define the $item as a selector inside the repeater’s scoop.
let $item = $w.at(event.context);
Thanks Ahmad, but it does not work with the code
it now says that event is not defined even though I added " let $item = $w . at ( event . context ); " to the top of the code and everywhere else that $item is already declared
Where do you get that error? What’s your site URL? And by the matter of fact, why you’re not using the repeater’s onItemsReady() function to handle these event handlers?
Hi Ahmed,
Isn’t onItemReady() used to create a repeater? I am not creating it, I used ready available template and added code to add zoom-in/zoom-out effect on the images.
The site is not published, still on editor mode…
See errors below
You can’t use event.context in the upper scoop, you need to use it inside an event handler of a child element in a repeater, for example:
repeating_image2.onMouseIn((event) => {
/* Here "event" is declared as a parameter of
the event handler so we can use get the context from it.*/
let $item = $w.at(event.context);
/* Then you can use the $item scoop to perform
actions and run code on a specific item inside
the repeater */
$item('#element1').hide();
$item('#element1').text = "This text will only be visible on this item";
})
Hope that helped you understand when and where you can use it.
Thanks Ahmed! It did help me better understand. The code I sent to Dima seems to be doing the work though so will leave it like it as long as it does not cause issues
