Is there a way to prevent the execution of onComplete if the animation was
to() and the value was already met)?I assume onInterrupt could be used for that? If so, how?
UPDATE:
Here is a jsfiddle example: https://jsfiddle.net/2f1jbwra/2/
jsfiddle with kill(): https://jsfiddle.net/2f1jbwra/4/
jsfiddle with overwrite: "auto": https://jsfiddle.net/2f1jbwra/5/
Interrupted tweens (and timelines) don't call their onComplete callback because they have been stopped. So just make sure your tweens are killing off the ones that they should by using overwrite: 'auto' or overwrite: true.
If you aren't actually interrupting the tween, you can remove the onComplete callback by using .addEventListener() with null as the second parameter.
If you are interrupting the tween and you need to hook into that event, you can use the onInterrupt callback but that wouldn't help you in this case.
It's also worth noting that no events (including onComplete) will fire if the tween never started in the first place. With that being said, tweens where the start and end values are the same (like the situation that you describe in the question) are still ran like normal. It's just that you can't see any changes because none happen visually.
FYI you're more likely to get even quicker answers and additional commentary/helpful info and approaches if you ask GSAP specific questions like this in the GSAP forums.