Skip to content

[BUG] The variants prevent drag transformation #2807

@programming-with-ia

Description

@programming-with-ia

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions