Composables

Plugins reference

All available composables and their corresponding nuxt.config.ts keys.

Available composables

Enable any plugin by adding its key to the plugins array in nuxt.config.ts. The composable is then auto-imported everywhere.

Composable	Plugin	`nuxt.config.ts` key
`useGsap()`	GSAP core	— (always available)
`useScrollTrigger()`	ScrollTrigger	`ScrollTrigger`
`useScrollSmoother()`	ScrollSmoother	`ScrollSmoother`
`useSplitText()`	SplitText	`SplitText`
`useMotionPathHelper()`	MotionPathHelper	`MotionPathHelper`
`useDraggable()`	Draggable	`Draggable`
`useFlip()`	Flip	`Flip`
`useObserver()`	Observer	`Observer`
`useGSDevTools()`	GSDevTools	`GSDevTools`
`useCustomEase()`	CustomEase	`CustomEase`
`useCustomWiggle()`	CustomWiggle	`CustomWiggle`
`useCustomBounce()`	CustomBounce	`CustomBounce`

Enabling multiple plugins

nuxt.config.ts

export default defineNuxtConfig({
  gsap: {
    plugins: [
      'ScrollTrigger',
      'ScrollSmoother',
      'Draggable',
      'Flip',
      'SplitText',
      'Observer',
      'CustomEase',
    ],
  },
})

Playground examples

Live examples for each plugin are available in the playground:

draggable.vue — Draggable with cleanup
scroll-trigger.vue — ScrollTrigger with pinning
split-text.vue — SplitText character/word animation
scroll-smoother.vue — ScrollSmoother + ScrollTrigger
flip.vue — Flip layout transitions
observer.vue — Observer swipe detection

Edit this pageorReport an issue

useScrollTrigger()

Scroll-driven animations with GSAP ScrollTrigger.