Jump to content
GreenSock

mercurymirror

Animate from a nextjs next/Link

Recommended Posts

I want to reuse an hamburger menu I had from a previous react app in my new Nextjs app. There is a siple animation on a list of links. On the previous app, the link where with React-router-dom and it was ok. Since I now use next/link, it doesn't work anymore. Any reason for that?

 

const handleHover = (e) => {
gsap.to(e.target, {
duration: 0.3,
y: 3,
skewX: 4,
ease: 'power3.inOut'
});
};
 
const handleHoverExit = (e) => {
gsap.to(e.target, {
duration: 0.3,
y: -3,
skewX: 0,
ease: 'power3.inOut'
});
}
 
<nav>
<ul>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/nouveautes">Nouveautés</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/catalogue"> Catalogue</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="https://shop.paradisepapers.fr/"> Diffusion</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/contacts"> Contacts</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="https://cmeditions.us17.list-manage.com/subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&amp;id=fa0ff0c34e"> Newsletter</Link></li>
</ul>
</nav>

 

Link to comment
Share on other sites

Hello @mercurymirror and welcome to the GreenSock forums.

 

If this is about route/page transitions, perhaps this post could be helpful:

 

If not, please provide a live editable sample using either codesandbox or stackblitz.

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

No, it's just an hover animation on each Link. 

Sorry I didn't achieve adding a nextjs codepen.

 

Link to comment
Share on other sites

Ahhh, OK.  Hopefully this is enough to get you started:

https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component

 

Unfortunately, as far as I know, the Link component doesn't expose a ref to the DOM element being rendered, so you have to create one by yourself using a component (as shown in the docs).

 

Perhaps @elegantseagulls has some experience with this, normally the hover effects I add to links are quite simple and I create them with CSS transitions (this probably is going to cost me in the future :D).

 

Given what you're trying to achieve, you could also create a codepen sample in order to get a glance of what you're trying to do and port that to another sandbox using Next.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Thank you for the answer. 

I found a simple way to solve the problem. I put the linked text inside a <a> tag indide the <Link> tag and animate from this <a> tag. I worked :)

 

Link to comment
Share on other sites

Just an FYI. GSAP has a selector method that could simplify this a bit, specially considering that React components tree is rendered starting with child components. The docs have a series of examples on how to use it with React and other frameworks as well:

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

Happy Tweening!!!

  • 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.
×