Hover over text effect

Ask the community
1

Hi, does anybody know how to get an animation/effect when hovering over text. Something similiar to [this:](this:

https://neat-burger.com)
[https://neat-burger.com](this:

https://neat-burger.com)

Thanks,

Rich

2

Hey Richard,
Yes you can achieve something similar, obviously it needs some tweaking for the exact desired effect,
but you can do it using corvid code and specifically wix-animations and the timeline API.

Here’s an example I did real quick to demonstrate:

https://idoh33.editorx.io/mysite-32

and the code:

//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
    $w('#text3,#text4,#text5').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();
    })

}
3

Wow! Thanks so much for the quick answer and solution - this will work perfectly.

Thanks again

4

@richsargeant Glad to help! :grinning:

5

@idoh I tried to add this to Corvid but didnt seem to work. I have little experience in coding. Is there a specific area in Corvid that it needs to be added to?

6

Can you send the url of your published site?

7

https://richsargeant.editorx.io/menu-1

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();
    })

}
9

Yes! Thats working now Ido - thanks. Ill have a play around with the effect.

Really appreciate your help!