[AJUDA] Efeito de hover no site do Zeno Rocha.
Pessoal, alguém sabe como fazer esse efeito tão fluído de hover nos itens da navbar que tem no site Zeno Rocha?
Já dei uma olhadinha no código fonte,mas ainda não entendi a mágica por trás.
Fala mano, boa tarde. Eu acho esse efeito muito irado e repliquei no meu novo site pessoal que estou desenvolvendo.
A mágica toda quem faz é a lib de animação framer-motion:
Se você for ao código do Zeno vai ter esse cara: import { AnimateSharedLayout } from 'framer-motion';
Atualmente ele foi removido e basta vc usar o layoutId. https://www.framer.com/motion/guide-upgrade/#50
Aqui o exemplo do meu site usando o layoutId:
Github: https://github.com/yurimutti/yurimutti.com/blob/main/src/components/layouts/navbar/index.tsx Deploy: https://yurimutti-com.vercel.app/
JSX:
<S.Anchor onHoverStart={() => setHovered(page)}> {isHovered && ( <S.NavHovered layoutId="shape" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> )} {page} </S.Anchor>
Estilos para deixar ele atrás dos links:
export const Anchor = styled(motion.a, { position: 'relative', height: '40px', zIndex: 1, padding: '2 ′ ,color: ′ slate12', cursor: 'pointer',
color: '$slate1', }, });
export const NavHovered = styled(motion.span, { position: 'absolute', inset: 0, backgroundColor: 'slate6 ′ ,borderRadius: ′ default', zIndex: -1, });
Links úteis: https://codesandbox.io/s/framer-motion-2-animatesharedlayout-animate-between-different-components-dy0bv
Provavelmente deve-se ser por conta destas propriedades
.c-cohhyn::after { content: ""; position: absolute; margin: 0px auto; top: 18px; left: 0px; right: 0px; height: 1px; width: 20px; background: rgb(255, 255, 255); opacity: 0; transition: opacity var(--transitions-duration) ease-in-out; }
esse tipo de transição faz ficar fluido e a var de transitions é 0.2s (--transitions-duration: 0.2s;)