GSAP PIills not showing

[TerraHQ]

I have a problem with the animation when I use filters.
I have 4 filters which load different content without refreshing my page: All - Content - Design - Digital. In this case, the pills change depending on the filter I am in:
All, Content and Digital - have 7 pills
Design has 6 pills.
Example of the error:
I’m in All (7 pills are visible), I switch to Design (6 pills are visible), and when I go back to All, instead of seeing 7 pills again, 6 are visible, the seventh one does not appear – GSAP does not take into account the seventh pill so it does not animate it.
Could someone help me to know why this happens? – Thank you!

See the Pen poVoeBe by julifredes (@julifredes) on CodePen

[Rodrigo]

Hey,

 

First, you created another thread in the forums, which you declared as closed. This seems to stem from the same issue. In the future please keep everything in one thread. Let me know if it's OK to delete the other thread.

 

Second, you're using Vue2, any particular reason for that? I'd strongly recommend using Vue3 and switch to the composition API.

 

Third, regarding your issue, the problem resides in your Vue logic, not the GSAP part of your example. There are two problems in your code. The cardAnimation method is executed only when the component is mounted and not when the pills list is updated. After updating the filter you should call that method again. Also you're using the pills refs right after updating the state of your component. You should always wait for the next tick in order to be sure that the DOM has been updated, which ensure that the refs will hold the up-to-date DOM elements. Adding a watcher for the service reactive property seems to solve the problem:

watch: {
  isChanging: (e) => {
    gsap.set(document.querySelectorAll(".artwork"), {
      autoAlpha: 0,
    });
  },
  // Add this to the watchers
  service() {
    this.$nextTick(function() {
      this.cardAnimation();
    });
  },
},

Happy Tweening!!!