I know there are other questions on this topic, but after spending hours on this ... to no avail, I decided to ask here.

I am trying to make the nav element only grow on the left side (instead of the right side). Could you please let me know what I'm doing wrong ?

Here is a codesandbox : https://codesandbox.io/s/framer-motion-side-menu-forked-2goegq?file=/src/styles.css .

Thank you very much !

CodePudding user response：

The direction of your animation seems to depend on the position of your clip-path in Example.tsx: https://codesandbox.io/s/framer-motion-side-menu-forked-39ldtp?file=/src/Example.tsx. Now you just have to move the div to the left.

You need to set the following css on your motion.div;

width: 100%;
height: 100%;
position: absolute;
top: 0;

I can't give the full code because I've never used React or Framer so I'm not sure how to add css to a motion.div

CodePudding user response：

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.