Skip to content

[BUG] Content animation bug on animation first run #229

@anatolii-pyroh

Description

@anatolii-pyroh

Using 0.9.0 version.

I have a drawer that contains 2 screens inside, at the moment only one can be shown to the user. So when user goes from first screen to second, first time animation runs it has a bug. The content moves fast from bottom like it had position absolute. After second screen loaded, animation starts working fine. Im using default animation of useAutoAnimate hook.

Here is a drawer component:

const InvoiceDrawer = (props: Props) => {
  const { isLocked, currencyDisplay, amount } = props;

  const transition = useCustomTransition({ variant: "default" });

  const [isOpen, setIsOpen] = useState(false);
  const [isGeneratedInvoice, setIsGeneratedInvoice] = useState(false);
  const [message, setMessage] = useState("");

  return (
    <Drawer open={isOpen} onOpenChange={setIsOpen}>
      <Button
        onClick={() => setIsOpen(true)}
      >
        Receive
      </Button>

      <DrawerContent
        className="overflow-hidden"
        aria-description="invoice-drawer"
      >

        <div className="flex flex-col" ref={transition}>
          {isGeneratedInvoice ? (
            <InvoiceSecondStep
              key="second-step"
              message={message}
              amount={amount}
              currentCurrency={currencyDisplay.currentCurrency}
            />
          ) : (
            <InvoiceFirstStep
              key="first-step"
              currencyDisplay={currencyDisplay}
              setMessage={setMessage}
              setIsGeneratedInvoice={setIsGeneratedInvoice}
              message={message}
            />
          )}
        </div>
      </DrawerContent>
    </Drawer>
  );
};

The child components dont have container, they are rendered with react fragment. Also it doesnt matter what step is first or second, no matter what, when second step is rendered, on first animation run it will have that "pop up" from bottom.
Also, is there a way to remove scaling from default animation?

https://youtu.be/ZjS5Q7X71Dg

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions