import wixAnimations from 'wix-animations';

// image 1 scale animation

const imageTimeline = wixAnimations.timeline();

// image 2 scale animation

const imageTimeline2 = wixAnimations.timeline();

// image 3 scale animation

const imageTimeline3 = wixAnimations.timeline();

$w.onReady(function () {

    // image 1 scale animation

    const image = $w('#image1');

    imageTimeline

        .add(image, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });

    image.onMouseIn(() => {

        imageTimeline.play();

    });

    image.onMouseOut(() => {

        imageTimeline.reverse();

    });

    // image 2 scale animation

    const image2 = $w('#image2');

    imageTimeline2

        .add(image2, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });

    image2.onMouseIn(() => {

        imageTimeline2.play();

    });

    image2.onMouseOut(() => {

        imageTimeline2.reverse();

    });

    // image 3 scale animation

    const image3 = $w('#image3');

    imageTimeline3

        .add(image3, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });

    image3.onMouseIn(() => {

        imageTimeline3.play();

    });

    image3.onMouseOut(() => {

        imageTimeline3.reverse();

    });

});