0

I have multiple router links of the same class that i would like to execute a hover-state animation on individually. I am using template $refs to isolate the event/animation target on hover, like so:

<section class="home__project">
        <router-link @mouseover="titleOver" @mouseout="titleOut" ref="title" to="/first-route" class="home__project__title">First Route</router-link><br>
        <router-link @mouseover="titleOver" @mouseout="titleOut" ref="title" to="/second-route" class="home__project__title">Second Route</router-link><br>
        <router-link @mouseover="titleOver" @mouseout="titleOut"  ref="title" to="/third-route" class="home__project__title">Third Route</router-link>
</section>

methods: {
    titleOver() {
      console.log(this.$refs.title)
      gsap.timeline({paused:true}).to(this.$refs.title, { 
      opacity: 0,
        stagger: 0.01,
        duration: .2, 
        ease: "back"
      }).play();
    },
    titleOut() {
      gsap.timeline({paused:true}).to(this.$refs.title, { 
      opacity: 1,
        stagger: 0.01,
        duration: .2, 
        ease: "back"
      }).reverse();
    },
  }

right now i have the greensock animation adjusting the opacity just to keep it simple for testing but i cant even get it to do that. logging this.$refs.title inside the mouseover method returns the proxy event handler for the last child only ("third-route"). All of the examples online appear to follow this same basic pattern so im not sure where im going wrong. What is the proper way to use vue refs to select and animate one of several elements of the same class with greensock?

JRT
  • 21
  • 5
  • You won't want to be creating a new timeline each time. You should create the timeline once then use control methods to manipulate it as covered in the [most common GSAP mistakes](https://greensock.com/mistakes/) article. As for getting the correct React hooks, there are some great React-specific articles in the GreenSock [learning section](https://greensock.com/learning/). – Zach Saucier Jul 08 '21 at 18:04
  • @ZachSaucier Thank you for the response Zach! I recognized your name from some of the greensock forums i've read. I'm now seeing the section about how to use loops and this looks like the culprit... I'll report back. – JRT Jul 09 '21 at 12:19

0 Answers0