Create an animated segmented control with TailwindCSS - css

Question

I'm a primarily back-end developer, so I'm not that experienced with front end stuff. I'm using React with Tailwind CSS to create a page, and I have this segmented control on the page.
Currently, it works just fine, and the white background and shadow statically changes between Monthly and Yearly. However, I would like to make it animated / have a transition so that the white background / shadow slides from Monthly to Yearly and vice versa. I've never done front end transitions / animations before so not really sure how to go about this, especially with Tailwind CSS.
This is the code for the segmented control currently:
function makeRecurrenceIntervalButtons(
currentInterval: RecurringPriceInterval,
setInterval: (interval: RecurringPriceInterval) => void,
) {
return ['month', 'year'].map((interval: RecurringPriceInterval) => {
const className = currentInterval === interval
? `relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`
: `ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`;
const title = interval === 'month' ? 'Monthly' : 'Yearly';
return (
<button
key={interval}
onClick={() => setInterval(interval)}
type="button"
className={className}
>
{title}
</button>
);
});
}
I've looked at this page extensively, but not sure how to properly apply it at all. Any help would be appreciated, thanks!

Answer 1

First of all, you need to add transform class - othervise transitions wouldn't work.
Next there are a few classes to control you transition timing - duration and timing function
Finally, in first case you should add translate-x-0, when it's Yearly - translate-x-full - it should move button on it's own full width (not the parent element) in a positive x-axis direction.
So add this classes, for ex:
Monthly - transform duration-700 ease-in-out translate-x-0
Yearly - transform duration-700 ease-in-out translate-x-full