Using and managing GSAP in Nuxt

[digisocialnet]

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)}

[digisocialnet]

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

[nicoladl]

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

[digisocialnet]

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

[nicoladl]

Glad to help!

[lock[bot]]

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.