Hi, does anybody know how to get an animation/effect when hovering over text. Something similiar to this: https://neat-burger.com
Thanks, Rich
Community X.
Connect with other creators, share ideas, give feedback and get the latest product updates.
Search
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(); }) }Wow! Thanks so much for the quick answer and solution - this will work perfectly. Thanks again
@Richard Sargeant Glad to help! 😀
@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?
Can you send the url of your published site?
https://richsargeant.editorx.io/menu-1
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(); }) }Yes! Thats working now Ido - thanks. Ill have a play around with the effect. Really appreciate your help!