Animated/Interactive control buttons inside interactive carousel component?

I have pagination dots and :arrow_left: :arrow_right: control arrows/buttons below my horizontal carousel. Both the pagination dot group & left-right arrows are their own separate interactive components. Those pagination/control components are set to quickly smart animate 150ms, and the transition between carousel pages is set to gentle 600. The problem is, since activating the carousel’s “change to” next page variant needs to use the control buttons, the carousel’s variants override the nested button component’s interactive variant animations. How can I achieve getting the 150ms button animation to play when clicking the very same button triggers the 600ms animation for the whole carousel page variant?

Hey there,

Thanks for bringing this issue to our attention. It seems this has been a longstanding problem for some time. Currently, we’re tracking it as a persistent issue with nested component variants.

Regrettably, I can’t provide an estimated time of resolution, but we highly appreciate your assistance in highlighting this issue.

Meanwhile, if there’s any workaround, I’m hopeful that other members of our community will share it to address this situation.

Thanks for your patience.

1 Like