Confused about using MorphSVGPlugin and others in React

[danboyle8637]

Just signed up for Club Green and excited to learn all the member plugins. I am building a site using Gatsby (React) and I'm adding all the bells and whistles...

 

So I'm a little confused about how these plugins work in React. I have TweenMax working like a charm and Draggable (base) too. 

 

Here is my screenshot:

 

 

I imported MorphSVGPlugin like the NPM docs say. It's in my project. 

 

I initially used:

 

TweenMax.to(node, 0.3, { rotation: '-90', morphSVG: <CloseMenuIcon />, onComplete: done })

 

But my error said to use the convertToPath method.

 

When I do what my screenshot shows, I get an error saying it can't .toLowerCase() undefined... and it shows that it's looking for the tagName.

 

As I understand, this method takes the element itself or a string (tagName)

 

I my React (Gatsby) project, all of my SVGs are components themselves that return the SVG element.

 

So I'm confused about how to use the plugin correctly since I can't get a reference to the CloseMenuIcon SVG that's not in my HamburgerMenuIcon file.

 

I appreciate the help!

[GreenSock]

First of all, welcome to the club! Great to have you on board. 

 

Disclaimer: I'm not at all familiar with Gatsby nor React, so I may not be able to help a lot. However, I will point out a few things:

1. MorphSVG can only work with <path> elements (or <polyline>/<polygon> in some cases). It animates the data in the "d" attribute.
2. If you're trying to morph a non-<path> SVG element (like a <circle>, <rect>, etc.), you can use the morphSVGPlugin.convertToPath() method which basically swaps in a <path> that has its "d" attribute filled to match the original element's shape.
3. The convertToPath() function doesn't return a single element or string because it may be used to rip through hundreds of elements if necessary. It looks like you were expecting it to return an element or string based on how you used it in your code, morphSVG:MorphSVGPlugin.convertToPath(<CloseMenuIcon />) (bad). Instead, you should just do the conversion separately, before the tween. That way, when you go to tween it, it's already a path.  

I'm curious, is "node" in your example an SVG <path> element? 

 

If you're still having trouble, a reduced test case in codepen would be super helpful. 

 

[danboyle8637]

Thanks! I'm excited to learn more and more about using Greensock, especially with React.

 

I'm going to have to figure out how best to get the section of my project on CodePen I guess. 

 

The "node" is part of React Transition which helps you animate whole components since as far as I know, you can't put a ref on a functional component. 

 

I have been trying a couple ideas but just going crazy. It's my goal to make some docs for react users!

 

I'll report back soon!

[GreenSock]

13 minutes ago, danboyle8637 said:

It's my goal to make some docs for react users!

 

Fantastic! Yeah, and @Rodrigo is our local React expert. In case you didn't see his article, it's at https://greensock.com/react