motion
motion copied to clipboard
[BUG] layoutid has incorrect positioning when height adjusts
These two issues touching on the same bug has still not been properly addressed:
- https://github.com/framer/motion/issues/1972
- https://github.com/framer/motion/issues/2006
The solution to simply add
wont work for the case when your layoutid is to animate vertically. E.g. imagine a case where you stacked the navigation buttons vertically as opposed to horizontally.
This indeed does not work, here is a quick sandbox for it: https://codesandbox.io/p/devbox/framer-motion-layoutid-bug-vertical-scroll-v92zzt
Edit: Managed to fix with something like this: style={isMobile ? { originY: '0px' } : { originX: '0px' }}
But still the animation will work only if it's one directional where isMobile
is a custom hook for mobile devices' detection (used in my case since my navbar positioning is vertical on desktop and horizontal on mobile).