AnSVG

Thanks a lot for your time and help! Now it works properly, I can't describe how happy you made me.

Ok, so I tried few other things and I figured out that adding any other timeline (which runs in a loop in the background) messes up the face morphing timeline. I think that's the problematic part of my face morphing timeline: this.faceAnimation.progress(this.animationProgress).pause(); (In other words, I'm frequently pausing an animation which progress depends on mouse position) My questions: Can frequent pausing of one timeline mess up other unrelated to it timelines? If it's true, is there a way to 'isolate' a timeline which I constantly pause (because of mousemove), so it doesn't affect other timelines? Thanks in advance to anyone who has any idea!

Hello, I have two master timelines in my Pen, independent of each other, work on different paths: Timeline 1) Face fading out / morphing and blowing bubbles - timeline's progress depends on mousemove. Timeline 2) Epaulettes ("feathers" on shoulders) staggering animation - independent timeline, runs in a loop in the background, starting when DOM is loaded. Everything runs fine when I have just the face morphing + bubbles animation. Problem: When I add the "feathers" on shoulders animation, the face morphing goes totally wrong. All the paths which were supposed to be morphed, are morphed to the neck path coordinates! Why this thing happens? These are two unrelated timelines.. This is how it's supposed to work, no epaulettes animation yet: This is how it's supposed to work, no epaulettes animation yet VERSUS: Another timeline added (epaulettesTL), morphing goes wrong: Another timeline added (epaulettesTL), morphing goes wrong

Thanks for your help, in the end it was a problem with event listeners.

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.