Jump to content
Search Community

use a vue3 Options API

Vadyaqq test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...