Does Detail Drawer work in Nuxt 3?

Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in ` `.

Does Detail Drawer work with Vue 2?

No - the component uses the Vue 3 Composition API and ` ` syntax. Vue 2 support is not planned. If you need Vue 2, the HTML/CSS/JS variant works in any context.

Does Detail Drawer work with TypeScript in Vue?

Yes. The component is typed and works with both `vue-tsc` and Volar. Props match the `data-anm-*` attributes documented on the main detail page.

Will the animation flash before hydration in Nuxt SSR?

Brief flash is possible because GSAP needs the client to initialize. The component sets the parked state via `gsap.set` on `onMounted` before the first paintable frame. For above-the-fold use in SSR contexts, add a CSS opacity:0 default that the component clears.

GSAP component for Vue

Detail Drawer in Vue.

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.

Built for annnimate.com.

Framework guides

Install

Install Detail Drawer in your Vue project

Detail Drawer ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.

BASH

Integrate

Where it goes in your Vue app

Detail Drawer is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.

In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.

The component uses the <script setup> composition API and TypeScript-friendly defineProps.

Gotchas

Vue-specific gotchas

GSAP cleanup in onUnmounted, not onBeforeUnmount

Use onUnmounted to kill tweens and ScrollTriggers. onBeforeUnmount fires while the DOM is still mounted, but onUnmounted is the more idiomatic place for animation cleanup in Vue 3.

Template refs are .value, not .current

const el = ref(null); access as el.value (not el.current like React). Pass el.value into gsap.to / gsap.from targets.

Plugin registration (gsap.registerPlugin(ScrollTrigger, ...)) can run at module top level in Vue 3 + Vite because the build is client-first. In Nuxt with SSR, wrap in if (process.client) or place inside onMounted.

FAQ

Common questions

Does Detail Drawer work in Nuxt 3?: Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in .
Does Detail Drawer work with Vue 2?: No - the component uses the Vue 3 Composition API and