No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Ref on quasar component does not trigger gsap animations

    Help
    animation components
    3
    3
    17
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      Dietbepis1 last edited by

      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!

      I dobbel 2 Replies Last reply Reply Quote 0
      • I
        Ilia @Dietbepis1 last edited by

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

        1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @Dietbepis1 last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post