import {timeline} from 'wix-animations'

    

 

$w.onReady(function () {

 

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

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

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

    const target4 = $w('#title');

 

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

 

    timeline()

        .add(target1, {y: 40, x: -280, scale: 1, duration: 600, easing: 'easeOutCirc'})

        .add(target2, {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'}, 0)

        .add(target3, {y: -40, x: 280, scale: 1, duration: 600, easing: 'easeOutCirc'}, 0)

        .add(target4, {y: -60, x: 0, scale: 1.15, duration: 400, easing: 'easeOutCirc'}, 0)

        .play()

})

 

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

 

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

 

    timeline()

        .add(target1, reset)

        .add(target2, reset, 0)

        .add(target3, reset, 0)

        .add(target4, reset, 0)

        .play()

})

 

});