Jump to content
Search Community

Animation being applied to all instances of button at same time

MarkD617 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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;
        }
      };
    },
  },
 

 

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...