I'm trying to animate the elements of a menu with GSAP.
I'm using hooks like useRef
and it works fine with the <a>
elements which are links to an external website but not for the <Link>
elements for internal routes.
Menu:
<nav>
<ul>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)}
ref={line1} href="/nouveautes"> Nouveautés</Link>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line2} href="/catalogue"> Catalogue</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line3}
href="/"> Diffusion</a>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line4}
href="/contacts"> Contacts</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line5}
href=";amp;id=fa0ff0c34e"> Newsletter</a>
</li>
</ul>
</nav>
The GSAP functions:
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'
});
}
useRef:
let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();
I'm trying to animate the elements of a menu with GSAP.
I'm using hooks like useRef
and it works fine with the <a>
elements which are links to an external website but not for the <Link>
elements for internal routes.
Menu:
<nav>
<ul>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)}
ref={line1} href="/nouveautes"> Nouveautés</Link>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line2} href="/catalogue"> Catalogue</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line3}
href="https://shop.paradisepapers.fr/"> Diffusion</a>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line4}
href="/contacts"> Contacts</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line5}
href="https://cmeditions.us17.list-manage./subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&id=fa0ff0c34e"> Newsletter</a>
</li>
</ul>
</nav>
The GSAP functions:
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'
});
}
useRef:
let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();
Share
Improve this question
edited Jan 23, 2021 at 19:57
Zsolt Meszaros
23.2k19 gold badges57 silver badges69 bronze badges
asked Jan 22, 2021 at 23:34
Rom-888Rom-888
8762 gold badges14 silver badges34 bronze badges
1 Answer
Reset to default 4next/link
ponent still requires you to pass a child element to it. You can add <a>
's as children to your <Link>
's, then apply the ref
and callbacks to them.
<nav>
<ul>
<li>
<Link href="/nouveautes">
<a onMouseEnter={e => handleHover(e)} onMouseOut={e => handleHoverExit(e)} ref={line1}>
Nouveautés
</a>
</Link>
</li>
<!-- remaining code -->
</ul>
</nav>