Angular 4 & MorphSVGPlugin

[thomashijmans.apps 1 Likes (Newbie)]

When I use the Angular 4 syntax the morphSVG tween is not working.

First I tried this but it logs this message: invalid morphSVG tween value: [object SVGPathElement

 

TweenMax.to(this.localSideMenuBtnStart.nativeElement,1,

{morphSVG:this.localSideMenuBtnEnd.nativeElement});

 

So I tried this and there is no log but neither a morphSVG tween.

 

TweenMax.to(this.localSideMenuBtnStart.nativeElement,1,

{morphSVG:this.localSideMenuBtnEnd.nativeElement.getAttribute('d')});

 

I use compound paths from Adobe Illustrator

 

Thanks

 

*By the way the morph is working when I use the convertToPath method inside ngOnInit with direct DOM manipulation.

 

 

 

 

 

 

 

[GreenSock 8,117 Likes (Superhero)]

Hm, it's kinda tough to diagnose without seeing a reduced test case in context, but that error sounds like you just forgot to load MorphSVGPlugin (as if GSAP is trying to literally tween a property that's called "morphSVG" because it's not registered as a plugin). (?)

 

Are you sure you loaded it? Can you console.log(MorphSVGPlugin.version)? 

[thomashijmans.apps 1 Likes (Newbie)]

Yes I'm sure the plugin is loaded. I see in my console version 0.8.8

 

But when I use the convertToPath method with the angular 4 viewChild local variables it won't recognize the new generated path. So my solution was don't use the convertToPath method  and use Illustrator to make compound paths but clearly morphSVG isn't capable to use this kind of paths.

 

For now it's working with the convertToPath method and direct DOM manipulation.

 

 

 

[GreenSock 8,117 Likes (Superhero)]

So you've got it working okay? 

 

I was a little confused about what you meant about the compound paths. MorphSVGPlugin doesn't morph <g> (group) elements or anything other than a <path>. So perhaps when you created a compound path, it wasn't resulting in a <path>? Is that what you meant? 

[thomashijmans.apps 1 Likes (Newbie)]

Haha yes its working, but in the Angular documentation they discourage the use of direct DOM manipulation methods.

 

Another question over the compound paths functionality in Illustrator. It creates from rects, circles, polygons one big path. 

 

Normal SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="38" viewBox="0 0 52 38">
  <title>portfolio-2</title>
  <rect y="15" width="52" height="9" fill="#e1eae5"/>
  <rect y="30" width="52" height="8" fill="#e1eae5"/>
  <rect width="52" height="9" fill="#e1eae5"/>
</svg>

 

Compound SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="38" viewBox="0 0 52 38">
  <title>portfolio-2</title>
  <path d="M20,31H72v9H20V31Zm0,23H72V46H20v8Zm0-38v9H72V16H20Z" transform="translate(-20 -16)" fill="#e1eae5"/>
</svg>
 

Its like the convertToPath method but it merge all the rects into one path.

 

When i use this svg element to create a morph it end up off center. I tried it with and without the transform attribute.

 

<svg #sideMenuBtn (click)="setStateSideMenu()" id="menu-btn" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="42.9" viewBox="0 0 52 42.9">

<polygon id="end" points="47.12 6.13 40.99 0 25.67 15.32 10.35 0 4.22 6.13 19.54 21.45 4.22 36.77 10.35 42.9 25.67 27.58 40.99 42.9 47.12 36.77 31.8 21.45 47.12 6.13" fill="#e1eae5"/>

<path id="start" d="M20,31H72v9H20V31Zm0,23H72V46H20v8Zm0-38v9H72V16H20Z" transform="translate(-20 -13.88)" fill="#e1eae5"/>

</svg>

 

So my question is it possible to use compound paths or do I something wrong?

 

[GreenSock 8,117 Likes (Superhero)]

Sure, it can morph those - the issue was just that you've got a translation on that starting path, so it's moving everything up and to the left. You could just animate to x:0, y:0 to gradually remove that. 

See the Pen f9d7050f02e4c0d198d8ec14d089d48c by GreenSock (@GreenSock) on CodePen

 

If you want more control over HOW it morphs, what I would personally do is take the original hamburger artwork (3 rectangles) and overlap 2 of them to make the "x" (keeping them as separate paths) and maybe put the third either right on top of one of those or scale it to nothing. That way, all the coordinates and shapes match up perfectly and you're not trying to merge 3 different shapes into a single (more complex) "x" path. Just a thought. 

[thomashijmans.apps 1 Likes (Newbie)]

Thanks, I get it. Great fast respons by the way.

[GreenSock 8,117 Likes (Superhero)]

No problem. And thanks for being a member! Good luck with the project.

[OSUblake 9,990 Likes (Superhero)]

I wouldn't expect binding to work on any element that you called convertToPath on. Why? Because it creates a new element. Angular doesn't know this.

 

And the reason you have to do direct DOM manipulation with the plugin is because it uses the setAttribute method to change the path. I explain a little bit about that at the end of this post.

 

If you want to bind to an Angular component, you can precompile the path data ahead of time, or use the pathFilter method at runtime, and then use GSAP to animate the path data as a regular string on your component.

 

I have to do something similar to that to get the plugin to work with generic objects so I can do morphing on canvas.