How to animate components?

[IHIutch]

Is there a way to animate the accordion opening and closing? Radix exposes height/width variables, for example, to make it easy to access the inner height/width of the accordion contents. But I don't see any way to access those values from the docs

---

Updating this question to be more inclusive of enter/exit animations in general. In addition to context (like "height" or "width") specific variables, it would be nice to have access to other attributes that would enable easier animations. Presently, enter animations are easy, but exit animations are not possible (as far as Im aware) because components are hidden immediately when closed.

As an example, React Aria exposes a property and data attribute (data-entering or data-exiting) that makes it easy to attach enter or exit animations.

[cschroeter]

Thanks for bringing this to our attention. In fact we are just on the hunt to finalize the component API for animating and lazy mounting components. That's what we have at the moment:

<Dialog>
  <DialogTrigger className={triggerClass()}>open</DialogTrigger>
  <Portal>
    <DialogPresence>
      <DialogOverlay  />
    </DialogPresence>
    <DialogPresence lazyMount={true|false}  unmountOnExit={true|false} onExitComplete={() => {}}>
      <DialogContent>
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>
          Description
        </DialogDescription>
      </DialogContent>
    </DialogPresence>
  </Portal>
</Dialog>

This kind of component type will be available for all disclosure type components like Popover, Tabs etc.

Type definition for reference:

type PresenceProps = {
  /**
   * @default false
   */
  unmountOnExit: boolean

  /**
   * @default false
   */
  lazyMount: boolean // or  deferMount: boolean
}

Please see #1155

[IHIutch]

Following up here after playing with Ark a bit more. This is good progress and makes sense. I've been having some success with tooltips and such.

However, there is still the question of Accordions which I think are unique because they need to be aware of the height/width of their contents. Any plans to support that?

[cschroeter]

I have a simple animation running but it is not perfect https://park-ui.com/docs/components/accordion

[IHIutch]

Hm, interesting. I hadn't thought about that. That may suffice for my use case, for now. Thanks for sharing