Jump to content
Search Community

Wrong morphing of an Ellipse

grensesnitt 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

Hey grensesnitt and welcome,

 

Why do you need to use MorphSVG for this? If you're just animating the stroke-width you can do that without MorphSVG with just a regular <circle> as mikel said. 

 

Anyway, I'm not sure why your SVGs are morphing in this way. Maybe another moderator will come around and be able to help more specifically. I do know that we have this handy video that may help you fix some potential other issues with your MorphSVG. 

 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Hey grensesnitt and welcome,

 

Why do you need to use MorphSVG for this? If you're just animating the stroke-width you can do that without MorphSVG with just a regular <circle> as mikel said. 

 

 

Thank you :)

 

Well, I usually get the svg from clients, which is the case with this particular svg. If I change it to a circle-tag I have to be sure it's the exactly the same, since clients do like their logo :) I'll have a look at it.

Link to comment
Share on other sites

The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick.

WHXOAU3.png

 

As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

Sorry about the confusion there - I've never seen that happen before but your demo helped me find a very rare edge case in the conversion algorithm where the arc command "a" could run into a Math.acos(-1) which JS returns as NaN (weird!), so I implemented a workaround and uploaded a revised MorphSVGPlugin. Seems to work great now! (you may need to clear your cache)

 

Like others have suggested, tweaking  your path would also solve the issue. But I want MorphSVGPlugin to be as bulletproof as possible :) 

 

Thanks for being "Business Green"! 

  • Like 4
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.
×
×
  • Create New...