Vue wrapper for GreenSock Animation Platform (GSAP)
-
🧮 In-template tweens
Use GSAP components in your template -
✨ Reactive animations
Don't worry about updating animations manually -
🎯 Scoped targets
Target elements by scoped IDs and classes within your Vue component -
🎼 Composition API
Use composables if you prefer more programmatic approach -
✅ Complete
Access all properties and methods without limitations - no more ditching the library as your project grows!
VueSock is GSAP-version agnostic and should work with any version you throw into your project.
// with npm
$ npm install gsap vue-sock
// or with yarn
$ yarn add gsap vue-sock
// or with pnpm
$ pnpm add gsap vue-sockMake sure you don't forget about vue!
You can either use components, or composable functions to build your animations, depending on your preference, or use cases. You can use components in Options API and Composition API, and composables in Composition API only.
<template>
<Tween :from="{ opacity: 0, xPercent: -20 }" :to="{ opacity: 1, xPercent: 0 }" :duration="2">
<div class="box">Hello VueSock!</div>
</Tween>
</template>
<script setup>
import {
Tween
} from 'vue-sock'
</script><template>
<div ref="helloVueSockEl">
Hello VueSock!
</div>
</template>
<script setup>
import { useTween } from 'vue-sock'
const [[ helloVueSockEl ]] = useTween({
from: { opacity: 0 },
to: { opacity: 1 },
controls: true
})
</script>For more examples, see Docs (under construction)
The roadmap is published on GitHub Projects.
Once implemented, Netlify is expected to be used for deployment and the docs will be plugged into Algolia search engine.
Help support my open-source work through PayPal and GitHub Sponsors.
MIT License © 2022 Jacob Janisz