Jump to content
GreenSock

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

MorphSVG menu - works in v 0.8.8 - but not in latest

Recommended Posts

I upgraded to latest MorphSVG (v. 0.9.1) - but now the SVG path closing animation is not working (the background should "scale" back in). What could be the problem?

It works in 0.8.8.

See the Pen wLqKLo by knalle (@knalle) on CodePen

Share this post


Link to post
Share on other sites

Hi @knalle,

 

I'm not sure what effect you want to achieve?
Something like here?

 

See the Pen OejXye by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

Share this post


Link to post
Share on other sites

Mikkel, the closing "look" is right, but my CodePen  is simplified and the case of simply reversing isn't going to work - I need to have svg working in in 0.9.1 again. Perhaps there are new MorphSVG setting I need to fill in?

Share this post


Link to post
Share on other sites

Hi @knalle,

 

I am not aware of any new MorphSVG setting.
Your code is very complex. And I can not find the error.
Another idea for toggling an animation could be like this ...

 

See the Pen EBvNMm by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

I'm not seeing any problem with morphSVG. The problem seems to be coming from your progress(1) jump in the setup function. I assume you did that to hide the <li> elements? You can use immediateRender:false to take care of that.

 

I forked your demo and used an addPause() and labels to make things a bit easier to follow. All seems to be working correctly and I don't see anything unusual with the morph plugin.

 

See the Pen EBvWBx by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Happy tweening.

 

 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
16 hours ago, PointC said:

I'm not seeing any problem with morphSVG. The problem seems to be coming from your progress(1) jump in the setup function. I assume you did that to hide the <li> elements? You can use immediateRender:false to take care of that.

 

I forked your demo and used an addPause() and labels to make things a bit easier to follow. All seems to be working correctly and I don't see anything unusual with the morph plugin.

 

 

 

 

Hopefully that helps a bit. Happy tweening.

 

 

 

 

 

Thank you PointC - that makes sense!

  • Like 1

Share this post


Link to post
Share on other sites

I notice the first time my menu timeline animation is lagging (well, not the simple codepen version here).

And if I apply the timeline.progress(1).progress(0) trick (as Jack points out in

 

See the Pen NWWGRjB by knalle (@knalle) on CodePen

 (line 30, I have added progress(0).progress(1) )

  • Like 1

Share this post


Link to post
Share on other sites

It seems my post was trimmed somehow:)

but the problem is that the “anti-lag trick” (progress) is not working with the menu (codepen above), so the closing animation makes a weird jump. How come?

Share this post


Link to post
Share on other sites
28 minutes ago, knalle said:

the closing animation makes a weird jump. How come?

That's a good question. I'm not sure why that happens. Maybe another forum member like @GreenSock can help.

Share this post


Link to post
Share on other sites

@knalle sorry about that! It was a very obscure (unknown) bug that'd only happen in very rare situations, and of course yours triggered it. Glad it got exposed. I just applied a fix and uploaded a new codepen-only file: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js

 

If you clear your cache, you should see that it's fixed. Better? 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

@GreenSock that’s why i love GSAP forum. This is the best library and community - by far!

Thank you all for all the help 🥰😀

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
9 hours ago, knalle said:

@GreenSock Btw, Is the fix available for download?

Yes, I just uploaded a new zip that you can grab from your account dashboard. Enjoy!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×