@c5vagas/gsap-vue for using GSAP in Vue.js

!GSAP Vue Banner

!NPM Downloads

A Vue 3 Composable for using GSAP with context, inspired by @gsap/react.

Features

- ✅ Fully compatible with Vue 3 Composition API
- ✅ Automatic GSAP context handling and cleanup
- ✅ Optional scope for selector text (no need for multiple refs)
- ✅ Dependency tracking (reactivity-aware)
- ✅ contextSafe for event listeners and delayed callbacks
- ✅ Headless mode for SSR or non-browser environments

Installation

``bash
npm install gsap gsap-vue


or


yarn add gsap gsap-vue
`

Basic Usage

`vue



`

API

* useGSAP(callback, config?) — Core composable for GSAP animations.
* useGSAP.register(core: typeof gsap) — Replace GSAP core if needed.
* useGSAP.headless = true — Enable headless mode for SSR or tests.

$3

- scope → limits selector text to a container ref
- dependencies → reactive dependencies to re-run animations
- revertOnUpdate → revert context on dependency change

Examples

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



``

Demo 🚀

👉🏼 Try the live demo

Check the demo folder for examples of usage.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

License

MIT License © c5vagas