-
I'm trying to replicate this effect where the active tab indicator is animated.
Line 25: Here's the orange highlight: {hoverAnchor === link && (
<motion.div
layoutId="underline"
transition={{ duration: 0.15 }}
className="absolute bottom-0 left-0 h-[2px] w-full bg-orange"
/>
)} Line 58: Here's the <motion.ul
initial={{ x: 'var(--menu-offscreen)' }}
animate={{ x: menuOpen ? 0 : 'var(--menu-offscreen)' }}
onMouseLeave={() => setHoverAnchor('')}
className="fixed left-4 top-4 flex h-[calc(100vh_-_2rem)] w-[calc(100vw_-_2rem)] flex-col rounded-lg bg-white py-4 [--menu-offscreen:-400px] xs:max-w-[368px] sm:static sm:h-auto sm:w-auto sm:max-w-full sm:flex-row sm:py-0 sm:outline-none sm:[--menu-offscreen:0px]"
> It will animate correctly if It will animate correctly if I turn the grandparent Not sure what I'm missing, and the docs doesn't seem to say anything about nesting motion divs, or I couldn't find one. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
I tinkered around and found the problem lies in the CSS variables, not <motion.ul
initial={{ x: 'var(--menu-offscreen)' }}
animate={{ x: menuOpen ? 0 : 'var(--menu-offscreen)' }}
className="[--menu-offscreen:-400px] sm:[--menu-offscreen:0px]"
> I was trying to animate {/* react state */ smallScreen && (
<motion.ul
initial={{ x: -400 }}
animate={{ x: 0 }}
/>
)} |
Beta Was this translation helpful? Give feedback.
I tinkered around and found the problem lies in the CSS variables, not
<motion.ul>
itself:I was trying to animate
x
based on CSS variable--menu-offscreen
which changes depending on Tailwind's breakpoints. The problem disappears if I don't usevar(--menu-offscreen)
inintial
andanimate
, so I replace it with a fixed number, and now I handle the breakpoint changes with React instead of Tailwind. It looks something like this: