motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
24.68k stars 826 forks source link

[BUG] The `variants` prevent `drag` transformation #2807

Open programming-with-ia opened 1 month ago

programming-with-ia commented 1 month ago

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.

image

programming-with-ia commented 1 month ago

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