Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AnSVG

MorphSVG - paths are morphing wrong when another independent timeline added

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 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

Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

4 hours ago, AnSVG said:

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?

 

You can pause a timeline as much as you want and it has absolutely nothing to do with somehow contaminating another timeline. There's no problem whatsoever with that, at least from GSAP's viewpoint. 

 

From what I can tell, your issue is caused by something that Vue is doing in the DOM, swapping around elements and mixing up references. If you remove Vue from the equation, you'll see that the issue disappears. One way I noticed you can resolve the issue in this case is to pre-render your timeline(s) by simply jumping to the end and then back to the beginning when you first create them, like:

faceMasterTL
	.add('facemasterstart')
	.add(faceFadeTL, 'facemasterstart')
	.add(faceMorphTL)
	.add(blowBubbleTL)
	.progress(1).progress(0); // <-- THIS PRERENDERS YOUR ANIMATIONS!

 

That's basically forcing everything to get locked in initially (starting and ending values) so that Vue's shifting of things in the virtual DOM doesn't contaminate things. I'm not a Vue expert, so perhaps someone else can explain it better or offer a different solution. 

 

It might also be worth trying a switch to using Vue's "refs" to reference the elements rather than selector text. Here's an article that Google came up with: https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.
×