Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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