Hover Effect on Images in Repeater

Show and tell
,
1

Hi everyone,
I think, this will be useful for some or many!!!

I am sharing a code I got while searching and with some modifications…
Here’s what I am sharing with you, all, today …

When the mouse pointer enters the container the image will start the effect!!!

For this →

#dataset1 - dataset
#repeater1 - repeater connected to dataset1
#container1 - container in the repeater
#image1 - image for the effect

import { timeline } from 'wix-animations';

$w.onReady(function () {
    $w('#dataset1').onReady(() => {
        $w('#repeater1').forEachItem(($item, itemData, index) => {
            $item('#container1').onMouseIn((event) => {
                timeline()
                    .add($item('#image1'), { y: 4, x: 4, scale: 1.40, duration: 600, easing: 'easeOutCirc' })
                    .play()
            });

            $item('#container1').onMouseOut((event) => {
 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

                timeline()
                    .add($item('#image1'), reset)
                    .play()
            })

        });
    });

});

Instead of ‘easeOutCirc’ you can use many …
from here → easeOutCirc constant - Curves class - animation library - Dart API

Hope, this will be useful !!!

6 Likes
2

a big thanks!!!

3

Great job, i love it Thank you for sharing.

4

helpp it doesnt work on mine

5

Hey! I might need some help. Can i make this effect on a simple hover box and not on a repeater?

6

Exucuse me, can you make a video how to make this, where need to put this code and e.t.c. I’m a new and really want to learn how to create my own website. Thank you!

7

Super, thanks a lot :wink:

8

@ajithkrr This is great! Do you have any advice on how to make this work when the images are connected via a dataset from a collection?

9

Actually never mind, still works using #image1 ID :sweat_smile: