nuxt-gsap
Easy GSAP (https://greensock.com/) integration with Nuxt.js
Setup
For Nuxt version > 2.9
- Add
nuxt-gsap
dependency to your project
yarn add --dev nuxt-gsap # or npm install -dev nuxt-gsap
- Add
nuxt-gsap
to thebuildModules
section ofnuxt.config.js
buildModules: 'nuxt-gsap'
For Nuxt version < 2.9
- Add
nuxt-gsap
dependency to your project
yarn add nuxt-gsap # or npm install nuxt-gsap
- Add
nuxt-gsap
to themodules
section ofnuxt.config.js
modules: 'nuxt-gsap'
options
You can pass different options using module inline options:
buildModules: 'nuxt-gsap' imports: 'Back' 'Circ' // Specify the gsap modules you want to import. By default, gsap & Linear are loaded
or nuxtGsap section in nuxt.config.js
buildModules: 'nuxt-gsap' nuxtGsap: imports: 'Back' 'Circ' // Specify the gsap modules you want to import. By default, gsap & Linear are loaded
Usage
This module globally injects $gsap instance, meaning that you can access it anywhere using this.$gsap. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$gsap
Example:
index.vue
<template> <h1 ref="test" class="test"> Works! </h1></template> <script> { this }</script><style lang="scss" scoped> test color: red; display: inline-block; </style>
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
- Visit http://localhost:3000
License
Copyright (c) pirony romainpouchol@gmail.com