[MorphSVG - paths are morphing wrong when another independent timeline added]

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

[MorphSVG - paths are morphing wrong when another independent timeline added]

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!

 

 

[MorphSVG - paths are morphing wrong when another independent timeline added]

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:

See the Pen 5e829cdbd381a3fb6dbb3353721498c8 by ScavengerFrontend (@ScavengerFrontend) on CodePen

 

See the Pen b6ed043550e1b4f7e9e7f5102e25c08d by ScavengerFrontend (@ScavengerFrontend) on CodePen

[MorphSVG - weird behavior - flickering, elements disappear]

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

[MorphSVG - weird behavior - flickering, elements disappear]

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.

See the Pen dbef70755c0d7b4f3ca07cb35577d6d0 by ScavengerFrontend (@ScavengerFrontend) on CodePen