Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kresogalic

Trying to replicate menu link animation effect

Recommended Posts

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. ?

  • Like 4
Link to comment
Share on other sites

@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>
Link to comment
Share on other sites

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. ?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×