Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Richard Sargeant
Nov 5

Hover over text effect

2
Ido Hershkovits
Best Answer
Nov 5

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

}

Richard Sargeant
Nov 5

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

Richard Sargeant
Nov 5

@Ido Hershkovits 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?

1
Ido Hershkovits
Nov 5Edited: Nov 5

Can you send the url of your published site?

1
Ido Hershkovits
Nov 5

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

}

1
Richard Sargeant
Nov 5

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

Editor X

Design your boldest creations.