Trying to replicate menu link animation effect

[kresogalic]

Hi guys, I am trying to replicate menu link hover effect from this site https://www.niccolomiranda.com/

 

Can you help me how can I do that? 

[Victor Work]

Hello @kresogalic, could you post a codepen from your replica attempt?
But if it is animation with text, I believe that the demonstration below will give you an idea,}
there are several ways to do it, that was the one I found easier.
Using the GSAP SplitText Plugin.
 

Look:

See the Pen aPoYEB by Noturnoo (@Noturnoo) on CodePen

Hope this helps you. ?

[kresogalic]

@Noturnoo thank you this works, but I am integrating this in React, and what happens if I have structure like this:

 

<nav className="links">

     <NavLink exact to="/">Home</NavLink>

     <NavLink to="/services">Services</NavLink>

     <NavLink to="/work">Work</NavLink>

     <NavLink to="/blog">Blog</NavLink>

 </nav>

[Victor Work]

6 hours ago, kresogalic said:

and what happens if I have structure like this

Hi @kresogalic

You can use the same method, you just need to add the animations in a hover function.
If you do not use pug, I put as a comment the html structure used.
 

See the Pen VqZJmb by Noturnoo (@Noturnoo) on CodePen

Show us how it turned out. ?