Adding slide animation to sidebar

[chemmanouilidis]

Hello,

I am trying to add some sliding animation when Sidebar component gets rendered but ease-in-out and duration-300 doesnt seem to work. Currently, I have modified sidebar

element with the below code (I pull displaySidebar property from context):

<div className={cn(s.root)} ref={sidebarRef} onKeyDown={onKeyDownSidebar} tabIndex={1} > <div className="absolute inset-0 overflow-hidden"> <div className={s.backdrop} onClick={onClose} /> <section className={'absolute inset-y-0 right-0 md:w-auto max-w-full flex outline-none md:pl-10 ${ displaySidebar ? 'translate-x-0' : 'translate-x-full' } ease-in-out duration-500'} > <div className="h-full w-full md:w-screen md:max-w-md"> <div className={s.sidebar} ref={contentRef}> {children} </div> </div> </section> </div> </div>

I also tried adding the translation and ease animation properties on the root element, also tried mimicing the code from the featureBar component, all of them didnt work so far.

translates seem to work but ease-in-out and duration are not. Any help would be greatly appreciated.