LIVE SITE

Menu hover animation

Hover, Menu, All interactions

 import wixAnimations from 'wix-animations';


$w.onReady(function () {

    hoverEffect();

});


function hoverEffect() {

    const obj = {

        proj1: {

            image: '#mediaPlayer1',

            box: '#box3',

            viewmore: '#text5',

            bg: "#box11"

        },

        proj2: {

            image: '#imageX1',

            box: '#box7',

            viewmore: '#text6',

            bg: "#box12"

        },

        proj3: {

            image: '#imageX2',

            box: '#box10',

            viewmore: '#text15',

            bg: "#box13"

        },

        proj4: {

            image: '#mediaPlayer2',

            box: '#box8',

            viewmore: '#text9',

            bg: "#box14"

        },

        proj5: {

            image: '#mediaPlayer3',

            box: '#box9',

            viewmore: '#text12',

            bg: "#box15"

        },

    }


    var timer;

    for (let item in obj) {

        $w(obj[item].box).onMouseIn(() => {

            clearTimeout(timer);

            wixAnimations.timeline()

                .add($w('#mediaPlayer4'), { y: -20, opacity: 0, duration: 200, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].image), { y: -20, opacity: 1, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].bg), { opacity: 1, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].viewmore), { y: -20, opacity: 1, duration: 300, easing: "easeOutSine" })

                .play();

        });


        $w(obj[item].box).onMouseOut(() => {

            wixAnimations.timeline()

                .add($w(obj[item].image), { y: 0, opacity: 0, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].bg), { opacity: 0, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].viewmore), { y: 0, opacity: 0, duration: 400, easing: "easeOutSine" })

                .play();

            timer = setTimeout(function () {

                wixAnimations.timeline()

                    .add($w('#mediaPlayer4'), { y: 0, opacity: 1, duration: 400, easing: "easeOutSine" })

                    .play();

            }, 500);

        });

    }


}

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.