Jump to content
Search Community

MorphSVG - weird behavior - flickering, elements disappear

AnSVG test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

First of all, welcome to the forums @AnSVG. Looks like a pretty cool animation!

 

It's difficult to pull everything apart and decipher all that code and I don't even really know what I'm supposed to see in that animation, but from your description it kinda sounds like it could be an overwrite issue. If a tween begins that affects a property on an object that's already being controlled by a different tween (so they're fighting over the same property), it kills the other one. Perhaps that's happening here? You can, of course, set overwrite:false on any tween or even TweenLite.defaultOverwrite = false to do it globally, but just beware that'll allow conflicting tweens to persist (and fight). 

 

Does setting TweenLite.defaultOverwrite = false resolve things for you? 

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...