Does Drift Gallery 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 Drift Gallery 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 Drift Gallery 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

Drift Gallery in Vue.

A row of product cards drifting sideways on their own that you can grab and throw, and they keep going before they settle. Grab a card and its neighbours part to make room, with a filmic grain and colour wash over the whole thing that reacts to how hard you fling it.

Install

Install Drift Gallery in your Vue project

Drift Gallery 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

Drift Gallery 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

Full teardown in onBeforeUnmount

Dispose every geometry/material/texture/render target, call renderer.forceContextLoss(), kill the Draggable instance, gsap.ticker.remove(frame), and disconnect the ResizeObserver - otherwise the WebGL context leaks across route changes.

three is a dynamic import

onMounted awaits import("three"); the canvas mounts a frame later. Fine for a section, but guard against unmount-before-resolve.

Props baked at mount

Same as React - config is read once in onMounted; changing a prop needs a remount.

FAQ

Common questions

Does Drift Gallery 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 Drift Gallery work with Vue 2?: No - the component uses the Vue 3 Composition API and