Detail Drawer
The whole hero is the trigger. Click it and a detail panel slides in while the hero image pushes back, scales up and darkens behind it, then the panel's text reveals line by line. Closing runs it all in reverse.
One of 71 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
What I wanted here was for the page you click to feel like it steps back as the drawer comes forward, instead of the drawer just sliding in over a static page. So when you open it, the hero behind pushes back and darkens and its text fades, all on the same timing as the panel coming in - that shared timing is what makes it read as one movement instead of two. The panel doesn't just slide either, it slides and wipes open together with a slight lag between them, which gives it some depth as it arrives.
The inner content was fiddlier than it looks. The text reveals line by line behind a mask, and getting that clean took a couple of goes - tight headlines kept getting their edges and the tails of letters like g and y clipped by the mask. Once that was sorted the lines wipe up cleanly, and they only start most of the way through the opening so the panel is already there to catch them.
Past that it's yours. Trigger it from any hero, send the drawer in from the left or the right, set how wide it opens and how fast, and drop your own content into the panel. Below a certain width it goes full-screen so it still works on a phone.
What you'll need.
Install
- GSAP
- SplitText
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Detail Drawer work with React and Vue?
- Detail Drawer ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Detail Drawer?
- Yes. Detail Drawer is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Detail Drawer without editing code?
- Detail Drawer exposes 3 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Detail Drawer free?
- Detail Drawer is part of the Annnimate Library, a paid subscription (from EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- Can I use Detail Drawer in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Detail Drawer on as many projects as you build, with no attribution required.
- Does Detail Drawer respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
