Hello, I have a Pen with many animation timelines, everything works well, besides one morphing case.
It's the eyesTL timeline - closing the eyes.
The eyes are affected by two overlapping timelines:
1) eyesTL - timeline which runs in the background, when DOM is loaded: eyes are supposed to look left-right-left(normal x,y translations) and then close (using morphing)
2) ziggyTL - timeline which runs on mousemove event, the progress of the timeline is dependent on mousemove. It's the animation of the whole "face mask" and hands opening.
I observed few weird things:
1) adding repeatDelay to eyesTL timeline makes the face (#face-left, #face-right) disappear
2) morphing any other elements in the eyesTL with a different timing makes the face (#face-left, #face-right) disappear
#face-left and #face-right are created with clipPaths, maybe this influences the weird behavior?
Few other timelines, which don't use morphing, are as well influenced by the mousemove event and work well, so I'm wondering why in this case it fails.
[I gave up in the end on morphing the eyes and published a similar but slightly different pen, but the problem bugs me for a long time, so I decided to write this post. Maybe someone knows what's going on here.]
Just change the repetitionDelay in the eyesTL, so you know what I'm talking about.
The face simply disappears.