Skip to content

Commit

Permalink
support plugins config for gsap.registerPlugin
Browse files Browse the repository at this point in the history
  • Loading branch information
drc0 committed Feb 19, 2021
1 parent 03cb541 commit ee255af
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 12 deletions.
10 changes: 6 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
]
]
Expand All @@ -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
}
```

Expand All @@ -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
})
Expand Down
4 changes: 2 additions & 2 deletions lib/module.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
21 changes: 16 additions & 5 deletions lib/plugin.js
Original file line number Diff line number Diff line change
@@ -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)
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"test": "yarn lint && jest"
},
"dependencies": {
"gsap": "^3.2.5"
"gsap": "^3.6.0"
},
"devDependencies": {
"@babel/core": "latest",
Expand Down

0 comments on commit ee255af

Please # to comment.