San

Hi Rodrigo, What I actually meant is that for some reason I feel doing querySelect and addEventListner inside the onMounted is a bit inconvenient. Is my way of doing it right or is there a better way to do it in vue perspective. Thank you for your response.

Hi, I am very new to gsap and I am trying to implement CreativeCodeClub's course on vue. Tried to do this one Rollover / Hover Effects for Multiple Elements and I ended up with this: <template> <div v-for="(item, index) in items" :key="index" :ref="createRef(index)" class="item home" > <div class="dot"></div> <div class="text">{{ item.text }}</div> </div> </template> <script setup> import { onMounted, ref } from "vue"; import gsap from "gsap"; // const item = ref(); const dot = ref(null); const text = ref(null); const items = ref([ { text: "home" }, { text: "about" }, { text: "portfolio" }, { text: "contact us" }, ]); const itemRefs = ref([]); const createRef = (index) => (el) => { itemRefs.value[index] = el; console.log(el); }; let tl; onMounted(() => { gsap.defaults({ duration: 0.5 }); itemRefs.value.forEach((item) => { const tl = gsap .timeline({ paused: true }) .to(item.querySelector(".text"), { color: "white", x: 10, scale: 1.2, transformOrigin: "left center", }) .to( item.querySelector(".dot"), { backgroundColor: "#F93", scale: 1.5 }, 0 ); item.addEventListener("mouseenter", () => tl.play()); item.addEventListener("mouseleave", () => tl.reverse()); }); }); </script> <style scoped> .item { display: flex; align-items: center; cursor: pointer; } .dot { height: 20px; min-width: 20px; background-color: #333; border-radius: 50%; margin-right: 10px; } .text { color: #777; font-family: Raleway; font-weight: 700; text-transform: uppercase; margin: 4px; font-size: 40px; white-space: nowrap; } </style> It works fine. However, I am not convinced on this approach and I believe there are better ways to do it. Your guidance is appreciated.