Exit animations with data-state in tw-animate-css
Exit animations play when an element is hidden. With data-state variants one element can carry both its enter and exit classes and switch between them.
How it works
- Pick the base class by state.
data-[state=show]:animate-inanddata-[state=hide]:animate-outchoose the base class from thedata-stateattribute. React sets that attribute from theshowstate. [1] - Describe the exit.
fade-outandslide-out-to-top-8describe how the panel leaves, whilefade-inandslide-in-from-top-8describe how it comes back. [1] - Keep the last frame.
fill-mode-forwardssetsanimation-fill-modetoforwards, so the panel stays at the end of the exit animation instead of popping back. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useState } from 'react';
export default function App() {
const [show, setShow] = useState(true);
return (
<div className='flex h-[380px] flex-col items-center justify-center gap-6 bg-slate-100'>
<button
onClick={() => setShow(!show)}
className='rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white'
>
{show ? 'Hide panel' : 'Show panel'}
</button>
{/* data-state picks animate-in or animate-out */}
<div
data-state={show ? 'show' : 'hide'}
className='data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500 fill-mode-forwards w-80 rounded-xl bg-white p-5 shadow-lg'
>
<p className='font-semibold text-slate-800'>Changes saved</p>
<p className='mt-1 text-sm text-slate-500'>
data-state is now <code className='font-mono'>{show ? 'show' : 'hide'}</code>.
</p>
</div>
</div>
);
}
Press the button to switch data-state between show and hide. Code written by AgentGid [1].
Press the button to switch data-state between show and hide. Code written by AgentGid [1].Checked Oct 17, 2026: it starts without errors in Chromium with tw-animate-css 1.4.0, react 19.3.1, react-dom 19.3.1, tailwindcss 4.3.3. Needs WebGL.
More tw-animate-css examples
Slide-in animations in tw-animate-css Staggered delays in tw-animate-css Looping animations in tw-animate-css Enter animations in tw-animate-css
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.