Invalid property MorphSVG set

[BlueMountain]

Hi,

I am new user for GreenSock, i try to use MorphSVG (license Business).

I have this warning:

app.js:102 Invalid property MorphSVG set to #fax Missing plugin? gsap.registerPlugin()

 

import { gsap } from "gsap";
import { Flip } from "gsap/Flip";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(Flip, MorphSVGPlugin);
gsap.to("#copier", {duration: 1, MorphSVG: "#fax"});

my html

<svg version="1.1" id="copier" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve">....</svg>

<svg version="1.1" id="fax" style="visibility: hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve">....</svg>

I don't understand why i have this error, i already search in the forum.

Any idea?

 

Thanks a lot

[Rodrigo]

Hi and welcome to the GreenSock forums, also thanks for becoming a Club member and supporting GSAP!!!🙌

 

The main issue that I see in your code is that you're using the ID attributes in your <svg> tags. Those ids should be on your <path> tags:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve">
  <path d="..." id="copier" />
</svg>

<svg version="1.1" style="visibility: hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve">
  <path d="..." id="fax" />
</svg>

Give that a try and let us know how it goes.

 

If you keep having issues, please try to create a reduced live sample so we can have a better look at this:

Happy Tweening!!!

[BlueMountain]

Thanks for your help

I create a code Pen with 2 SVG

See the Pen XWpNKez by bluemountainteam (@bluemountainteam) on CodePen

 

I ask me if my SVG can be more complicated for MorphSVG

[PointC]

MorphSVG works path to path not SVG to SVG. You'd need to start with one of the paths in the copier SVG and end with one of the paths in the fax SVG. It looks like you have 6 paths in the first but only three in the second. You'll probably need to fade out three of the paths in the first SVG to make it work well. Or rework the vector art a bit.

 

Does that make sense?

 

Happy tweening.

 

[BlueMountain]

Ok i understand, thanks for your answer PointC

[BlueMountain]

Ok, now i progressed, you help me a lot , but i have a problem to keep  origin color:

See the Pen XWpNKez by bluemountainteam (@bluemountainteam) on CodePen

MorphSVG doesn't keep color ? must i use style css?

In the code, the icon save and check are green.

[PointC]

Correct. The fill color of the starting path will be used for the new shape. But you can tween to a new color if you like. 

 

gsap.to("#l1", {morphSVG:"#s1", fill:"#08B608"});

Or if they are all the same, you could set a default in the timeline like this:

const tl = gsap.timeline( {
  defaults:{
    fill: "#08B608"
  }
})
tl.to("#l1", {morphSVG:"#s1"});
tl.to("#l2", {morphSVG:"#s2"}, 0);
tl.to("#l3", {morphSVG:"#s3"}, 0);

Does that make sense?

 

Happy tweening.

 

[BlueMountain]

Hi PointC,

 

OK now the color is good, thanks , i search to use reverse, once animation launched

i would like to have a delay between the 2 animations. i try some tries, but nothing good

.pause().reverse() or .play().plause(2).reverse()

 

Thanks a lot

[Rodrigo]

In order to do that you can use the position parameter, that will allow you to add delays and/or overlapping between the instances of your timelines:

Happy Tweening!!!

[BlueMountain]

Ok Rodrigo, thanks,

I try with this code, i have my animation, maybe, we can do with an other code, how can i do a pause before reverse?

See the Pen XWpNKez by bluemountainteam (@bluemountainteam) on CodePen

[PointC]

If you just want the timeline to reverse after waiting 2 seconds, you can use a yoyo. Like this:

const step1 = gsap.timeline({
  defaults: { duration: 1 },
  repeat: 1,
  yoyo: true,
  repeatDelay: 2
});
step1
  .to("#l1-2", { morphSVG: "#s1-2" }, 0)
  .to("#l2-2", { morphSVG: "#s2-2" }, 0)
  .to("#l3-2", { morphSVG: "#s3-2", fill: "#08B608" }, 0);

 

[BlueMountain]

Great!, Thanks a lot