LIVE SITE

DISRUPTIVE hover animation

Hover, All interactions

import wixAnimations from 'wix-animations';


let rightimages = ('#img1right, #img2right, #img3right, #img4right')

let leftimages = ('#img1left, #img2left, #img3left, #img4left')

let shapes = ('#imageX1, #imageX2, #imageX3, #imageX4')


$w.onReady(function () {

    wixAnimations.timeline()

        .add($w(rightimages), { x: -320, duration: 0 })

        .play();

    wixAnimations.timeline()

        .add($w(leftimages), { x: 320, duration: 0 })

        .play();

    wixAnimations.timeline()

        .add($w(shapes), { scale: 0.5, duration: 0 })

        .play();

    hoverEffect();

});


function hoverEffect() {

    const obj = {

        approach: {

            imageleft: '#img1left',

            imageright: '#img1right',

            box: '#box7',

            shape: '#imageX4'

        },

        services: {

            imageleft: '#img2left',

            imageright: '#img2right',

            box: '#box8',

            shape: '#imageX3'

        },

        projects: {

            imageleft: '#img3left',

            imageright: '#img3right',

            box: '#box9',

            shape: '#imageX2'

        },

        news: {

            imageleft: '#img4left',

            imageright: '#img4right',

            box: '#box10',

            shape: '#imageX1'

        },

    }


    let shapeFade = {

        "duration": 250

    };

    for (let item in obj) {

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

            wixAnimations.timeline()

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

                .play();

            wixAnimations.timeline()

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

                .play();

            wixAnimations.timeline()

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

                .play();

            //$w(obj[item].shape).show('fade', shapeFade);

        });


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

            wixAnimations.timeline()

                .add($w(obj[item].imageleft), { x: 300, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].imageright), { x: -300, duration: 400, easing: "easeOutSine" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].shape), { scale: 0.5, opacity: 0, duration: 300, easing: "easeOutSine" })

                .play();

            //$w(obj[item].shape).hide('fade', shapeFade);

        });

    }


}

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.