Ok, so in my tests with the event callbacks that @tailbreezy suggested, overwriting can be false (and doesn't need to be auto) and the separation of the animations works well. The delayedCall however produces a js Error after a few seconds, even if you don't trigger the other animation at all: "Uncaught TypeError: s.call is not a function"
https://codepen.io/jhtjards/pen/MWbEqoG
I followed your advice however to encapsulate smileyface in a container element, i.e. <g class="smileyface-group">
Just to be sure: So one container per timeline (or even overlapping tween) is generally the cleaner way of having multiple animations on the same visual element?
Also changed: I removed the delayedCall completely, I wasn't able to make it work and with the restart(true) I have my initial delay, which does the job too. https://codepen.io/jhtjards/pen/WNoZgZE