Jump to content
Search Community

invalid morph to

Dennyno test
Moderator Tag

Go to solution Solved by Dennyno,

Recommended Posts

Hi all, the following code works smoothly (I guess so), but I think there's an issue somewhere because randomly I got a huge an annoying 

WARNING: invalid morph to: #ra-yt-ad

WARNING: invalid morph to:  #ra-bf-ad
WARNING: invalid morph to: #ra-mac-screen

Could it be caused by the prefetch links I got in header?
Any hint how to fix this? (Using Barbajs it takes no-time to have a long error log).

I tag @Carl as I bet he could have an easy solution for svg related stuff :) - but I'm open to any help :P
 

See the Pen VwEXVeE by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

Does your CodePen actually reproduce the problem? I don't see it. 

 

That error almost surely indicates that when you create the tween, the element containing the morph data that you're trying to morph to doesn't exist. For example, if you did morphSVG: "#empty" and there was no element with the #empty id at that point, obviously the tween wouldn't be able to do what it needs to do. So you've probably got some kind of lifecycle issue in your framework. Like...do whatever you need to do in order to make sure the elements actually exist before trying to tween them :) 

 

For starters, you could add a console.log() right before the tween to see what those elements actually are (the one(s) you're morphing to). I bet you'll find that they're undefined. 

  • Like 1
Link to comment
Share on other sites

Other related question: why MorphSVG gives error on the following path, saying that #dashedline is malformed?

 

<svg id="connect-svg" viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="theMask" maskUnits="userSpaceOnUse">
  <path id="dashedline" class="theLineFull" d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-miterlimit="10"></path>
    </mask>
  </defs>
  <g mask="url(#theMask)" class="theLine">
    <path d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="5" stroke-width="1" stroke-dasharray="10"></path>
  </g>
  <circle class="ball ball01" r="6" cy="220.572" cx="150" fill="#fff"></circle>
</svg>

 

Thanks

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