LIVE SITE

The work - image revel

Hover, All interactions

import wixAnimations from 'wix-animations';



const imageHover = wixAnimations.timeline();


const imageHover2 = wixAnimations.timeline();


const imageHover3 = wixAnimations.timeline();


$w.onReady(function () {

    // THE WORK text animation

    const shape = $w('#theWorkText');

    const shape2 = $w('#iiText');

    const textBox = $w('#box2');


    //imageHover first line ANIMATION

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

    const imageBox = $w('#hoverImage');


    //imageHover second line ANIMATION

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

    const imageBox2 = $w('#hoverImage2');


    //imageHover third line ANIMATION

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

    const imageBox3 = $w('#hoverImage3');


 


    //imageHover first line ANIMATION


    imageHover


        .add(image, { 'y': -207, opacity: 1, 'duration': 250, easing: 'easeInOutSine' })


    imageBox.onMouseIn(() => {


        imageHover.play();


    });


    imageBox.onMouseOut(() => {


        imageHover.reverse();


    });


    //imageHover second line ANIMATION


    imageHover2


        .add(image2, { 'y': -207, opacity: 1, 'duration': 250, easing: 'easeInOutSine' })


    imageBox2.onMouseIn(() => {


        imageHover2.play();


    });


    imageBox2.onMouseOut(() => {


        imageHover2.reverse();


    });


    //imageHover third line ANIMATION


    imageHover3


        .add(image3, { 'y': -207, opacity: 1, 'duration': 250, easing: 'easeInOutSine' })


    imageBox3.onMouseIn(() => {


        imageHover3.play();


    });


    imageBox3.onMouseOut(() => {


        imageHover3.reverse();


    });


});



Explore more Hover interactions 

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Add a Title

Add a Title

Tags

Sites on X | © 2021 made with ❤️ on Editor X.