Animation being applied to all instances of button at same time

[MarkD617 5 Likes (Newbie)]

I have a click event (vue.js) triggering a button animation all is working! good news! I found an instance on my site where these buttons are in a row of 4 next to each other and when I click on one button the animation is being applied to all 4 of the buttons. I tried to add a wrapper (button-link) and apply a forEach() using gsap.utils but i am still getting the same results. Not sure where I am going wrong.

 

methods: {
    linkTo(path) {
   
      let tlButtonLink = this.$gsap.timeline({
        onComplete: function () {
          pushToPath();
        },
      });

      const buttonLink = this.$gsap.utils.toArray('.button-link');

      buttonLink.forEach(function (button) {
        tlButtonLink.to(
          button.querySelectorAll('.arrow-caret'),
          {
            duration: 0.5,
            ease: 'power2.in',
            x: 0,
          },
          0
        ),
          tlButtonLink.to(
            button.querySelectorAll('.arrow-line'),
            {
              duration: 0.5,
              ease: 'power2.in',
              width: 0,
              opacity: 0,
            },
            '-=0.7'
          ),
          tlButtonLink.to(
            button.querySelectorAll('.link-border-bottom'),
            {
              duration: 0.5,
              ease: 'power2.in',
              width: 0,
              opacity: 0,
            },
            0
          );
      });

      const pushToPath = () => {
        if (!this.isAnchor) {
          this.$router.push({ path: path });
        } else {
          window.open(this.buttonPathTo, '_blank');
          tlButtonLink.pause();
          tlButtonLink.progress(0);
          this.isClicked = false;
        }
      };
    },
  },

 

 

 

 

[GSAP Helper 99 Likes (Contributor)]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[Cassie 5,413 Likes (Superhero)]

From a glance - You'll need to create a separate timeline for each button and then control each individual timeline depending on which one is clicked.

Right now you just have one long global timeline with all the animations on!
 

// this is ONE timeline
let tlButtonLink = this.$gsap.timeline();

// then you're grabbing all the buttons
const buttonLink = this.$gsap.utils.toArray('.button-link');

// and then looping around and adding EVERY button animation to that ONE timeline
      buttonLink.forEach(function (button) {
        tlButtonLink.to(
          button.querySelectorAll('.arrow-caret'),
          {
            duration: 0.5,
            ease: 'power2.in',
            x: 0,
          },
          0
        ),
          tlButtonLink.to(
            button.querySelectorAll('.arrow-line'),
            {
              duration: 0.5,
              ease: 'power2.in',
              width: 0,
              opacity: 0,
            },
            '-=0.7'
          ),
          tlButtonLink.to(
            button.querySelectorAll('.link-border-bottom'),
            {
              duration: 0.5,
              ease: 'power2.in',
              width: 0,
              opacity: 0,
            },
            0
          );
      });

This isn't a vue example but it will give you the right idea in vanilla JS

See the Pen PoqRZOB by GreenSock (@GreenSock) on CodePen

[MarkD617 5 Likes (Newbie)]

I appreciate the help! and after posting I ended up figuring it out and fixing! I used VUE refs instead of accessing the DOM elements and its working as I would like!

[Rodrigo 5,436 Likes (Superhero)]

Hi,

 

Maybe you should take a look at GSAP Context and see how helpful it is in the case of selectors. Actually it saves you from creating a lot of refs in your app.

 

Here you can see it action:

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

 

Is not the most complex use case but hopefully it'll be helpful for your scenario.

 

Finally here you can check about GSAP Context and how helpful it is when working with frameworks like Vue:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have more questions.

Happy Tweening!