Ability to Animate Changing of Tabs

[DanielBailey-web]

Is it possible to animate the content when changing tabs?

Example of what I am going for

https://tailwind-elements.com/docs/standard/components/stepper/

What I have tried

#tabs-content-target > [hidden] {
  transform: translateX(-150%) !important;
  display: block !important;
}
#tabs-content-target > div:nth-child(2)[hidden] {
  transform: translateX(150%) !important;
  display: block !important;
}
#tabs-content-target > [hidden]:first-child + [hidden] {
  transform: translateX(-150%) !important;
  display: block !important;
}
#tabs-content-target > [hidden]:last-child {
  transform: translateX(150%) !important;
  display: block !important;
}

<div id="tabs-content-target" className="overflow-x-hidden">
  <Tabs.Content
    value="1"
    className="transition-transform duration-500 translate-x-0"
  >
    Some non text content
  </Tabs.Content>
<Tabs.Content
    value="2"
    className="transition-transform duration-500 translate-x-0"
  >
    Some non text content
  </Tabs.Content>
<Tabs.Content
    value="3"
    className="transition-transform duration-500 translate-x-0"
  >
    Some non text content
  </Tabs.Content>
</div>

What it did

It animates the content coming in from the right or left; however, the problem is that tab content that is going out is immediately unmounted from the dom. And therefore is not able to be animated.

Is it possible to keep all of the tab content force mounted?

This would solve the problem of not being able to animate stuff that is leaving. Or even a way to delay the unmounting process would solve this problem.

[Jugbot]

Wouldn't this be solved by controlling when the tab is actually changed?

1. Receive tab index update (useEffect)
2. Animate out
3. Change tab index on radix component
4. Animate in

Of course this would require wrapping the radix component with your own.