Skip to content

Shared layout animations stop working when motion.div grandparent changes flex-direction #2516

Closed Answered by vietan0
vietan0 asked this question in Q&A
Discussion options

You must be logged in to vote

I tinkered around and found the problem lies in the CSS variables, not <motion.ul> itself:

<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 x based on CSS variable --menu-offscreen which changes depending on Tailwind's breakpoints. The problem disappears if I don't use var(--menu-offscreen) in intial and animate, 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:

{/* react state */ smallScreen && (
  <motion.ul
    initial={{ x: -400 }}
    animate={{ x

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by vietan0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant