Animations in sequence

I’ve always had trouble when making synchronised animations than run one ofter another. Not that it’s particularly difficult but I always ended up with a spaghetti code :cry:. I tried to come up with a more elegant solution and it kinda works. .but not really. I thought that maybe attaching a synthetic event to a document root would do the trick. And attaching ‘transitionend’ and ‘animationend’ events to animated nodes and removing them right after they’re done. Overall it doesn’t work as expected. Maybe someone could take a look and point any mistakes? Just to clarify, animation seems to work fine when executed once but when you run it again (to reverse it) it gets messed up.
CODEPEN