Is there a way to animate collapse() and expand()?

[laurentlahmy]

I'm trying to build a sidebar, and I'd love to animate it when expanding / collapsing, with a nice spring animation ideally.

[bvaughn]

Hey there. Animation is kind of out of the scope of this library, and isn't something I feel like I have the time to try supporting. I think you could potentially implement something using the imperative resize method, but I haven't tried it and can't say if it would work well.

Thanks for understanding!

[laurentlahmy]

Adding tailwind class transition-all duration-100 ease-in-out to the <ResizablePanel/> component seems to provide an animation.

[bvaughn]

That will probably animate expand/collapse but I would caution about using that approach bc it will likely break the drag resize behavior

[manzaloros]

@bvaughn , this is an incredibly useful library. Thank you for your hard work.

I will also add that I'd love animations for expand and collapse.

If you add CSS transitions to the children of both affected <Panel />s you will see animations, but it also affects the speed of manually dragging the resize panel handle around, so that solution doesn't work.

[bvaughn]

Thank you!

but it also affects the speed of manually dragging the resize panel handle around

Right. This is the main drawback, but it's a really significant one.

I haven't had a use case for animations myself so far with this library, but if I were going to do it I'd probably start by looking at a way to apply CSS transitions only when the programmatic API was in use. (Or in other words, never when the user is dragging.)

Currently this library adds a data attribute (drag-resize-handle-active) to a drag handle when a user is dragging it. Maybe we could also add an attribute to the parent PanelGroup when drag is active? and you could queue your CSS transitions based on it?

[sebastian-schuler]

In case anyone still has this issue:

Use the onDragging event on the handle and save the value returned in a state <PanelResizeHandle onDragging={(e) => setIsResizing(e)} />

Then just conditionally apply the styles to the Panel component:

className={cn(
            !isResizing && "transition-all duration-100 ease-in-out"
            )}