Approach to invalid property on Vue refs.

[kananomegane]

Good day GSAP forum, I'm looking for an approach for creating of reusable gsap animations in vue/nuxt from versed people.

Here's an example of what I tried to make, but I got an invalid property error. I understand that you can't animate DOM elements.
As I was searching the forums, I got an answer to use the selector utility. However, I'm quite lost on how should I apply it. I tried the stuffs that appeared from my search and asked an AI but didn't give me results.
 

export function useGSAP() {
  const elementRef = ref(null);

  const linkHover = () => {
    gsap.to(elementRef.value, { y: -3, duration: 0.3 });
  };

  const linkLeave = () => {
    gsap.to(elementRef.value, { y: 0, duration: 0.3 });
  };

  return {
    elementRef,
    linkHover,
    linkLeave,
  };
}

Hope people can give me on insights, thank you in advance!

[kananomegane]

Solved it by debugging the return value of the ref.value. I don't know if this will limit my options on more advanced reusable animations, so inputs are still accepted ^^
 

export function useGSAP() {
  const elementRef = ref(null);

  const linkHover = () => {
    gsap.to(elementRef.value.$el, { y: -3, duration: 0.3 });
  };

  const linkLeave = () => {
    gsap.to(elementRef.value.$el, { y: 0, duration: 0.3 });
  };

  return {
    elementRef,
    linkHover,
    linkLeave,
  };
}

 

[Rodrigo]

Hi,

 

I assume that you're aiming to create a Vue composable, right?

 

It would really help if you could whip a quick minimal demo that shows what you're trying to do. You can fork one of our starter templates in Stackblitz if you want:

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

 

Happy Tweening!