diff --git a/README.md b/README.md index 7750ef0..a964d2c 100644 --- a/README.md +++ b/README.md @@ -48,13 +48,14 @@ yarn add nuxt-gsap # or npm install nuxt-gsap ``` ## options -You can pass different options using module inline options: +You can pass different options using module inline options, with gsap 3 you probably want to use only plugins: ```js buildModules: [ 'nuxt-gsap', [ { - imports: ['Back', 'Circ'] // Specify the gsap modules you want to import. By default, gsap & Linear are loaded + imports: ['Power2'], // Specify the gsap modules you want to import. By default, gsap is loaded + plugins: ['PixiPlugin', 'ScrollTrigger'] // Various plugins to load, gsap.registerPlugin() will be called on each of them } ] ] @@ -67,7 +68,8 @@ or nuxtGsap section in nuxt.config.js 'nuxt-gsap' ], nuxtGsap: { - imports: ['Back', 'Circ'] // Specify the gsap modules you want to import. By default, gsap & Linear are loaded + imports: ['Power2'], // Specify the gsap modules you want to import. By default, gsap is loaded + plugins: ['PixiPlugin', 'ScrollTrigger'] // Various plugins to load, gsap.registerPlugin() will be called on each of them } ``` @@ -89,7 +91,7 @@ index.vue export default { mounted () { this.$nextTick(() => { // When using $refs, must wait for nextTick - const tl = this.$gsap.timeline({ repeat: -1, ease: this.$gsap.Linear.easeInOut(2) }) + const tl = this.$gsap.timeline({ repeat: -1, ease: this.$gsap.Power2.easeInOut(2) }) tl.to('.test', 2, { x: 200 }) // With css selector tl.to(this.$refs.test, 0.5, { x: 0 }) // With refs }) diff --git a/lib/module.js b/lib/module.js index bd979c4..6e34366 100644 --- a/lib/module.js +++ b/lib/module.js @@ -5,11 +5,11 @@ module.exports = function gsapNuxtModule (moduleOptions) { ...this.options['nuxt-gsap'], ...moduleOptions } - const DefaultImports = ['gsap', 'Linear'] + const DefaultImports = ['gsap'] options.imports = [ ...(options.imports || []), ...DefaultImports - ].join(', ') + ] this.options.build.transpile.push('gsap') this.addPlugin({ diff --git a/lib/plugin.js b/lib/plugin.js index 33b1063..d532c27 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -1,11 +1,22 @@ -import {<%= options.imports %>} from "gsap" +import {<%= options.imports.join(', ') %>} from "gsap" const activated = [ - gsap, <%= options.imports %> + <%= options.imports.join(', ') %> ] +<% if (options.plugins) { %> +<% options.plugins.map(p => { %> + import { <%= p %> } from "gsap/<%= p %>.js" +<% }); %> +<% } %> + export default async (context, inject) => { - const OptionsObject = { - <%= options.imports %> + <% options.imports.map(i => { %> + gsap['<%= i %>'] = <%= i%> + <% }) %> + <% options.plugins.map(i => { %> + gsap['<%= i %>'] = <%= i%> + <% }) %> + if (process.client) { + gsap.registerPlugin(<%= options.plugins %>) } - Object.keys(OptionsObject).forEach(key => gsap[key] = OptionsObject[key] ) inject('gsap', gsap) } diff --git a/package.json b/package.json index 60f1045..5acf16d 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "test": "yarn lint && jest" }, "dependencies": { - "gsap": "^3.2.5" + "gsap": "^3.6.0" }, "devDependencies": { "@babel/core": "latest",