GSAP + Vue using props to calculate a maxWidth

Question

I am trying to animate buttons in my application using GSAP. User clicks button and animates the maxWidth of the button. I'd like to have this dynamic and add a percentage of the max width that is set using props. is it possible to pass the prop maxwidth to the gsap timeline? as of now it does not work for me.

 props: {
    maxWidth: {
      type: String,
      required: true,
    },
},

 methods: {
    buttonTo(path) {
      let tl = this.$gsap.timeline({
        onComplete: function () {
          pushToPath();
        },
      });
      tl.to(this.$refs.primaryButton, {
        duration: 0.6,
        ease: 'power2.in',
        maxWidth: `calc(${this.maxWidth} + 5%)`,
      });

      const pushToPath = () => {
        this.$router.push({ path: path });
      };
    },
  },

Answer 1

I've run into a similar issue before. The nice thing is that it has nothing to do with the Vue Lifecycle, so the value is available within methods.

There are a couple of things that could be causing this issue. I'd start by making sure your prop, "maxWidth," has "px" or some form of CSS measurement tied to it. CSS calc can't have a plain number within the CSS "calc" function.

Here is an example using your function:

 props: {
    maxWidth: {
      type: String,
      required: true,
    },
},

 methods: {
    buttonTo(path) {
      let tl = this.$gsap.timeline({
        onComplete: function () {
          pushToPath();
        },
      });
      tl.to(this.$refs.primaryButton, {
        duration: 0.6,
        ease: 'power2.in',
        maxWidth: `calc(${this.maxWidth}px + 5%)`,
      });

      const pushToPath = () => {
        this.$router.push({ path: path });
      };
    },
  },

You could also switch your prop to be of the type "Number" in case, for some reason, the string is causing issues within the timeline.

If this helps, please let me know!