Nuxt.js: Using and managing GSAP in Nuxt

Created on 8 Dec 2017 · 5Comments · Source: nuxt/nuxt.js

I am having some trouble getting GSAP to work the way other Nuxt modules or plugins work. I got it to animate but I feel like I am duplicating code too much. I posted all of the details on StackOverflow but haven't received much response. Can anyone here make some reccomendations or share some links to help me? Thank you!

https://stackoverflow.com/questions/47667771/how-can-i-better-manage-using-gsap-animations-in-nuxt-js

_{This question is available on Nuxt.js community (#c2052)}

Source

digisocialnet

Most helpful comment

I've used a boolean state to manage an open/close menu behaviour.

My layout.vue

<MenuInit v-on:click.native="$store.commit('toggleMenu')"/>
<MainMenu v-if="$store.state.menu.show"/>

That helps me to show/hide menu component

In my MainMenu component I've wraped all the markup in a transition tag to call transitions method. Something like this:

<template name="menu">
  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
    ....
  </transition>
</template>

export default {
   methods: {
       beforeEnter: function (el) {
          // A lot of TweenMax code here
      }
      enter: function (el, done) {
          // A lot of TweenMax code here
      }
      leave: function (el, done) {
          // A lot of TweenMax code here
      }
}

And in my store/index.js:

export const state = () => ({
    menu: {
        show: false
    }
}) 

export const mutations = {
    toggleMenu (state, option) {
       state.menu.show = !state.menu.show
  }
}

(I am not 100% sure of the syntax because of I've extracted this code from a big code base)

Let me know what do you think about it

nicoladl on 8 Dec 2017

👍3

All 5 comments

Oh, I guess this partially answers my question but any other tips are welcome! https://github.com/pirony/ks-vue-scrollmagic 🧐

digisocialnet on 8 Dec 2017

I've used a boolean state to manage an open/close menu behaviour.

My layout.vue

<MenuInit v-on:click.native="$store.commit('toggleMenu')"/>
<MainMenu v-if="$store.state.menu.show"/>

That helps me to show/hide menu component

In my MainMenu component I've wraped all the markup in a transition tag to call transitions method. Something like this:

<template name="menu">
  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
    ....
  </transition>
</template>

export default {
   methods: {
       beforeEnter: function (el) {
          // A lot of TweenMax code here
      }
      enter: function (el, done) {
          // A lot of TweenMax code here
      }
      leave: function (el, done) {
          // A lot of TweenMax code here
      }
}

And in my store/index.js:

export const state = () => ({
    menu: {
        show: false
    }
}) 

export const mutations = {
    toggleMenu (state, option) {
       state.menu.show = !state.menu.show
  }
}

(I am not 100% sure of the syntax because of I've extracted this code from a big code base)

Let me know what do you think about it

nicoladl on 8 Dec 2017

👍3

I don't make very big websites so I don't make that many components usually. I do like how you used the tag on the template. Putting GSAP code in components is very helpful too! Thanks so much @nicoladl

digisocialnet on 11 Dec 2017

Glad to help!

nicoladl on 24 Aug 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.