Is this the right way in vue?

[San]

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.

See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple  Stackblitz that illustrates the issue? 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• Vue
• Nuxt
• React (please read this article!)
• Next
• Svelte
• Sveltekit

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

This Vue starter template shows how to toggle a GSAP instance in Vue using the reversed() method:

 

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

 

Just an FYI the reversed method works in the same way for a Timeline and a Tween:

https://gsap.com/docs/v3/GSAP/Tween/reversed()

 

Hopefully this helps.

Happy Tweening!

[San]

12 minutes ago, Rodrigo said:

Hi,

 

This Vue starter template shows how to toggle a GSAP instance in Vue using the reversed() method:

 

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

 

Just an FYI the reversed method works in the same way for a Timeline and a Tween:

https://gsap.com/docs/v3/GSAP/Tween/reversed()

 

Hopefully this helps.

Happy Tweening!

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. 

[Rodrigo]

Nothing wrong IMHO, the fact that you can actually get the DOM node you're after tells that the elements are rendered when that code runs, which is to be expected in the onMounted hook.

 

2 hours ago, San said:

Is my way of doing it right or is there a better way to do it in vue perspective.

There is always an argument to be made in this cases, some people will say that there is a better way, some people will say that the way you're doing it is the correct one. Again, IMHO the way you're approaching this is correct. I'm not a Vue expert but I've used it in several production projects so I know my way around it and I consider that the code you have in place should not cause any issues.

 

Happy Tweening!