use a vue3 Options API

[Vadyaqq 0 Likes (Newbie)]

Hi, I am new to gsap and my problem is to replace addEventListener with @click event  
  data() {
    return {
        elements: [],
        activeElement: null,
    };
  },
  methods: {

    categoryAnimationIsActive() {

        this.elements = gsap.utils.toArray(".category__item");
        this.activeElement = this.elements[0]; 

        gsap.set(this.elements, {
            y: 30
        });

        this.elements.forEach((el) => { 
            el.animation = gsap.to(el,{
                 y: 0,
                 paused: true
             });
            if (el === this.activeElement) {
                el.animation.progress(1);
            }

              el.addEventListener("click", () => {
    
                if (el !== this.activeElement) {
                  this.activeElement.animation.reverse();
   
                  el.animation.play();
                  this.activeElement = el;

                }
              });
        });   
    }

  },
  mounted() {
    this.categoryAnimationIsActive();
  }

[Rodrigo 5,887 Likes (Superhero)]

Hi @Vadyaqq and welcome to the GreenSock forums!

 

Is really hard for us to find an issue without a minimal demo that shows the problem you're having.

 

We have a collection of Vue3 starter templates, although they use the Composition API:

https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters

 

Here is a very simple example that just toggles a GSAP Timeline:

https://stackblitz.com/edit/vue-dm3aa9

 

I updated the starter template to use the Options API:

https://stackblitz.com/edit/vue-j9rm7w?file=src%2FApp.vue

 

Finally we always recommend in this frameworks (Vue, Svelte, React, etc.) to use GSAP Context

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps.

Happy Tweening!

[Vadyaqq 0 Likes (Newbie)]

@Rodrigo  thank you for the previous answer, I took something for myself. But unfortunately I can't solve my problem. My task is to replace

              element.addEventListener("click", () => {

    

                if (element !== activeElement) {

                  activeElement.animation.reverse();

   

                  element.animation.play();

                  activeElement = element;

 

                }

              });

with

 @click="handleIsActive" 

 in my methods . I apologize for not sending an example code right away, here it is -
https://stackblitz.com/edit/vue-cmtt9a?file=src%2FApp.vue 

Thank you for your time!

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

This seems to be a Vue related issue and not GSAP. Clicking those elements has no effect in the DOM. You are changing a reactive property here:

choseCategoriesName(category) {
  // console.log(category);
  this.choseCategoryName = category.items;
},

But that doesn't affect the DOM in any way. You have this on your HTML:
 

<!-- <div class="menu__content content">
  <menu-category :getCardsInChoseCategory='choseCategoryName'/>
</div> -->

But is commented out. Then in the child component you have this method that you want to run on a click, but that click event must happen inside that particular component, not outside.

 

You should check how props are passed down to components and also review conditional rendering in Vue:

https://vuejs.org/guide/components/props.html#props-declaration

https://vuejs.org/guide/essentials/conditional.html

 

As I said, this is more about Vue than anything else. If you're just starting with it, I'd recommend you to get familiar with the way Vue works and then add GSAP to animate things, otherwise you'll keep running into logic issues like this one. Here are some free resources that can help you:

Unfortunately we don't have the time resources to help users with complex setups or non-GSAP related issues.

 

Good luck with your project!

Happy Tweening!

[Vadyaqq 0 Likes (Newbie)]

I commented everything that is not related to my question )))
I'm interested in what I mentioned in the previous post, replace addEventLisner with @click event

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

Once again this is a Vue related issue, not a GSAP one.

 

You have to watch for the selected category on your menu items and not animate all of them in every single one. Is too much redundancy and possible a performance issue. You have to learn about Vue, in this case watchers and reactivity:

https://vuejs.org/guide/essentials/watchers.html

https://vuejs.org/guide/essentials/reactivity-fundamentals.html

 

I forked your example and made the changes in it:

https://stackblitz.com/edit/vue-xt8b87?file=src%2FApp.vue,src%2Fcomponents%2FmenuCategoryName.vue

 

Hopefully this helps.

Happy Tweening!

[Vadyaqq 0 Likes (Newbie)]

Thank you very much @Rodrigo
Maybe I misunderstood, I didn't say that gsap is the problem, I was wondering how to implement my animation using gsap in the vue3 Options API.
Thanks again for your time!

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

Indeed you never mentioned that this was a GSAP issue. Me mentioning that falls into the fact that we have to keep these forums focused on GSAP related issues, not issues related to other frameworks, that's all.

 

Luckily I had a few moments to spare and create the example for you, but only because it didn't require a lot of times. Have a look at the courses I posted before in order to learn more about Vue.

 

For any GSAP related question, we're here for you!! 💚

 

Happy Tweening!