Hover over text effect

Ask the community
8

In the function you need to select the element Id’s to the ones that you want affected, in my case they were “text3,text4,text5” but in your site you need to select the menu buttons.

Anyway heres the code that you need to paste in :

//import wix animations api
import wixAnimations from 'wix-animations';

$w.onReady(function () {
 //run hover function
    wiggleOnHover();
});

//define hover function
function wiggleOnHover() {
 //select the desired elements and set a onMouseIn eventhandler, any element that you include
 //here will be recieve the hover animation
    $w('#button2,#button3,#button4,#button5').onMouseIn((event) => {
 //animation on the target
        wixAnimations.timeline({
 "repeat": 2
            })
            .add($w(`#${event.target.id}`), { x: 3,y:1, duration: 70})
            .add($w(`#${event.target.id}`), { x: -3,y:-1, duration: 70}).play();
    })

}