Detail Drawer
General-purpose content drawer that pushes against the page it's triggered from. The entire full-bleed hero (image + headline) is the trigger - clicking it slides in a detail panel with a parallax x + clip-path reveal while the hero image translates away, scales up, and darkens under an overlay. Panel content reveals starting halfway through the entrance: text blocks wipe in via a per-line mask reveal, image blocks simply fade in. Closing reverses the entire choreography.
On mobile
Can't copy on a phone? Get the free Starter Pack instead.
Three production-grade components in React, Vue and HTML/CSS/JS, in your inbox, ready when you're back at your desk.
Where this component came from.
We built it for annnimate.com, our own site, and kept it in the library once it earned its place. The same code runs in production today.
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.
