Hey @mikel, thank you for this. I'm trying to elongate a path using this approach for example. I have this initial path d value.
M170.6 28.5l477.5-.5c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-27
And at some point in my animation I need this to dynamically be updated to this:
M68.2 28h579.9c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-2
But when that tween or moments happens I get errors:
Error: <path> attribute d: Expected move to path command ('M' or 'm'), "undefined".
I'm in a vue app and here is a look at the function that I'm calling at a particular moment. ".pointer" is the dashed path and ".dash" is the mask I'm using to create a growing and shrinking effect.
animateHotspot: function() {
const hsTL = gsap.timeline();
let path = this.getData ? this.getData.hotspot.desktop.mark : '';
hsTL.to('.pointer', { attr: { d: path } })
.to('.dash', { attr: { d: path } });
}
}
I'm wondering what I'm doing wrong here? this isn't the whole snippet but I wanted to test if dynamically swapping out the "d" value would work.
I was also curious how one would stop a repeating rotation on an element on click or some type of event?