Vadyaqq

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!

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

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