There are 4 possible state changes at variable intervals depending on the app settings (supplemented by the vars at the beginning of the demo JS, adding a hold will make it pause in the middle). inhale, hold1, exhale, hold2. Each state has an audio cue and triggers an external label change not shown in the codepen. I am currently handling this with the 2 onStart and onCompletes. You can imagine that the left side is inhale, it can optionally come to a pause in the center for hold, then continue round the right for exhale with a hold again. I am not sure this is possible with a single tween.
I had this working in anime.js but migrating to GSAP for better performance.
Is it expected that a second motionpath in a timeline would seem to ignore a 'start' setting? I guess trying to work out the SVG to have a more natural default start point (instead of 0.075!) could fix it or perhaps hacking around with play/pause and checking of the progress but TBH I had a hard enough time getting that one to work and would quite like to fix this implementation which feels like it should be working. ?