motion
motion copied to clipboard
[BUG] The `variants` prevent `drag` transformation
Issue: Dragging Disabled When Applying none Variant with Custom Transform
When using the following variants:
const variants: Variants = {
// ...other variants
none: (custom) => ({
width: "fit-content",
height: "fit-content",
transform: custom || undefined,
}),
} as const;
I apply the none variant with a custom transform. The custom transform is supposed to restore the position to a previous drag state. However, when the none variant is applied, it disables the drag transformation, preventing the window from moving.
Minimal Code Example
<motion.div
ref={winRef}
custom={positionBackup.current}
initial="none"
animate={isMaximize ? "maximize" : "none"}
variants={variants}
drag={!isMaximize}
dragListener={false}
dragControls={dragControls}
dragMomentum={false}
dragConstraints={winContainer ?? {}}
></motion.div>;
More Details
I am building a window component similar to a Windows OS window. I want the user to drag the window using the title bar.
this heppens only when value assign as string
also issue with other properties like height & width
that's working for me but need current feature
const variants:Variants = {
// others
none: custom => ({height: "auto", ...(custom ? {x: custom.x, y: custom.y}: {})})
} as const
but in case of 3d case an issue