Ref on quasar component does not trigger gsap animations

[Dietbepis1]

Hey all,

I am using gsap to do animations on a site that I am working on and it appears that a ref attached to a q-btn does not trigger an animation; however, if I wrap the q-btn in a div and attach the ref to that, it works as expected. So, as an example:

// This does not work
<template>
  <q-btn
  ref="btn"
  >
    Buy
  </q-btn>
</template>

// This DOES work
<template>
<div ref="btn">
    <q-btn>
      Buy
    </q-btn>
</div>
</template>

<script>
  mounted () {
    const { btn } = this.$refs

     gsap.timeline()
    .from(btn, {some settings})
  }
</script>

Just curious why this would be the case or if I am forgetting something.

Thanks for the help!

[Ilia]

@dietbepis1 You can try to check this.$refs.btn.$el just in case when ref is in btn?

[dobbel]

@dietbepis1

I am using gsap to do animations

Just curios, why are you using gsap and not Quasar’s morph feature?
https://quasar.dev/quasar-utils/morph-utils