[collapsible] `data-starting-style` is not properly applied at the opening animation

[tomas-gerzicak]

Bug report

Current behavior

Hi I think, that I found a bug in the current collapsible component, I need to apply the overflow-hidden class only during the opening animation, so for that I am using those data-starting-style and data-ending-style, unfortunately the data-starting-style is not being applied properly. I have a video demonstration down bellow and I also noticed this in the official docs. Can you confirm, if this is a bug?

Screen.Recording.2026-05-26.at.16.38.02.mp4

Expected behavior

The data-starting-style will be applied during the whole duration of the panel animation.

Reproducible example

You can just check your documentation page, it is clearly visible, that there is no data-starting-style applied.

The main issue is conditional overflow-hidden to be applied during the animations. In this example it is clearly visible, that the data-starting-style is not applied during the whole duration of animation.

Base UI version

v1.5.0

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

None

Additional context

Provide any additional context that might help us identify the problem and find a solution.

[mj12albert]

Expected behavior

The data-starting-style will be applied during the whole duration of the panel animation.

data-starting-style is only meant to exist for one frame so that CSS can transition from that to the open styles, so it's really hard to observe the attribute in the DOM in devtools.

If you're having an issue, could you provide a repro? (e.g. stackblitz) @tomas-gerzicak

[tomas-gerzicak]

Expected behavior

The data-starting-style will be applied during the whole duration of the panel animation.

data-starting-style is only meant to exist for one frame so that CSS can transition from that to the open styles, so it's really hard to observe the attribute in the DOM in devtools.

If you're having an issue, could you provide a repro? (e.g. stackblitz) @tomas-gerzicak

Hi @mj12albert , I updated the issue with link, where I reproduced the issue. My main problem is that now the conditional overflow-hidden does no work on the open animation, but properly works on the close. It is clearly visible in the example.

My workaround for now is something like this

<CollapsiblePrimitive.Panel
      data-slot="collapsible-content"
      className={cn(panelAnimation, isAnimating && 'overflow-hidden', className)}
      onTransitionStart={event => {
        if (isOwnHeightTransition(event)) setIsAnimating(true);
        onTransitionStart?.(event);
      }}
      onTransitionEnd={event => {
        if (isOwnHeightTransition(event)) setIsAnimating(false);
        onTransitionEnd?.(event);
      }}

But this could be solved in the Base-ui

[atomiks]

@tomas-gerzicak Why not just leave overflow-hidden unconditional like the docs demo styles do?

[data-starting-style] is the style to transition from and is removed after 1 frame on state change so the CSS transition can play; it's not a style present during the whole open animation

[tomas-gerzicak]

@tomas-gerzicak Why not just leave overflow-hidden unconditional like the docs demo styles do?

[data-starting-style] is the style to transition from and is removed after 1 frame on state change so the CSS transition can play; it's not a style present during the whole open animation

Hi we are using the collapsible in our docs and my other teams need to have a flexibility to display some old popovers and other interactive blocks, that can not be rendered at the bottom like the base-ui popovers, that is why we need this conditional overflow-hidden.
So in that case, what would you recommend doing, can't we have another attribute, that would be present during the animation? Or can you at least change the documentation, because this implies, that the data-starting-style is present during the whole animation?

[atomiks]

because this implies, that the data-starting-style is present during the whole animation?

That wording is definitely imprecise and should be updated.

The Animations page is accurate:

• [data-starting-style] corresponds to the initial style to transition from.
• [data-ending-style] corresponds to the final style to transition to.

can't we have another attribute, that would be present during the animation

This use case seems niche to me; as you said, it's to support legacy popovers and isn't necessary when using Base UI ones. So I think manually working around it to support your use case is okay.

onOpenChangeComplete would likely make it easier, though: #4434

[tomas-gerzicak]

because this implies, that the data-starting-style is present during the whole animation?

That wording is definitely imprecise and should be updated.

The Animations page is accurate:

• [data-starting-style] corresponds to the initial style to transition from.
• [data-ending-style] corresponds to the final style to transition to.

can't we have another attribute, that would be present during the animation

This use case seems niche to me; as you said, it's to support legacy popovers and isn't necessary when using Base UI ones. So I think manually working around it to support your use case is okay.

onOpenChangeComplete would likely make it easier, though: #4434

Okay, thanks, but this onOpenChangeComplete will be available in the 1.6.0 right? 🤔

[literalpie]

For what it's worth, the use-case @tomas-gerzicak is talking about matches my use-case that prompted #4381 almost exactly:

• We have an collapsible component where we want to hide scrollbars during animations
• We can't always do overflow-hidden because it would cause popovers from legacy components to be cut off
• onOpenChangeComplete is an acceptable solution, but something like [data-animating] would be even better