0

I've set up a simple SVG with two polylines and am trying to morph between them using GSAP's MorphSVG. https://greensock.com/morphSVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">
    <polyline id="plainLine" class="st0" points="298,279 387.5,279 469.2,279 596,279"> </polyline>
    <polyline id="roofLine" class="st0" points="297.6,282 385.8,257.9 469.2,279 596,279"> </polyline>
</svg>

Based on the documenation, it seems it should be as simple as:

TweenLite.to("#plainLine", 1, {morphSVG:"#roofLine"});

But try as I might, nothing is happening...

Here's a fiddle with my code:

https://jsfiddle.net/o48g3h0b/

rdoyle720
  • 2,940
  • 3
  • 17
  • 19

2 Answers2

2

Morph SVG Works with Paths instead of polygon, rect & circles you need to convert the polygon into Paths first Morph can itself convert the rect, polygons & circles to Paths but for complex objects it behaves clingy

To Convert the Rect, Polygons, Circles use Raphael Technique already mentioned in this thread Convert Polygon to Path

Check my Pen i have created the same effect

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"> <path id="plainLine" d="M298,279L387.5 279 469.2 279 596 279" style="stroke: red;stroke-width:8;fill:none"/> <path id="roofLine" d="M297.6,282L385.8 257.9 469.2 279 596 279" style="stroke: red;stroke-width:8;fill:none;"/> </svg> </body>

One more thing to your notice MorphSVG plugin is membership required plugin i would suggest using snap svg & animate path method for the morphing of svg.

Community
  • 1
  • 1
Harsh
  • 99
  • 6
0

I see what it is...MorphSVG is a "Club Greensock" (i.e. paid) plugin I haven't paid for. No wonder.

rdoyle720
  • 2,940
  • 3
  • 17
  • 19