[Animate from a nextjs next/Link]

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

 

[Animate from a nextjs next/Link]

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

Sorry I didn't achieve adding a nextjs codepen.

 

[Animate from a nextjs next/Link]

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>