Please add SVG morphing to the popmotion features

[Emasoft]

Please add SVG morphing to the popmotion features. I'm referring to something like the Greensock morphSVGPlugin:

Video: https://www.youtube.com/watch?v=Uxa9sdaeyKM
LIve Demo: http://codepen.io/cjgammon/pen/EVWjBO/

You can morph any shape into another (and you don't have to maintain same number of points between the start and the destination shape). Inbetweens for cartoon animations will be automatically generated from a small number of keyframes created in Inkscape or Illustrator, for example.
Greensock tweenmax is bloated compared to popmotion, and I would prefer using popmotion for SVG morphing.

[mattgperry]

Yeah so this would be amazing, obviously. You can currently morph SVG shapes using this technique: https://css-tricks.com/svg-shape-morphing-works/, animating a paths d attribute between two paths with the same number of points.

However the morphSVG plugin looks like a massive undertaking - I might be wrong on this but I don't have any idea how its done and I think the relatively niche appeal of the feature compared to others in the roadmap means it isn't currently a priority.

So it's something I'd love to have but not something I can imagine being able to make within the next 3-6 months.

[Emasoft]

Niche appeal? I don't think so. I think that this is going to br the next big thing on the web. All animations will be soon made with SVG Morphing. You just have to draw a couple of keyframes, and the morphing takes care of the rest. For example I can draw a "button up" and a "button down" state for a control, and the morphing generates the animation adding the inbetween frames at 60 fps. The same for switch on/switch off, selected/deselected, checkboxes, progress bars, etc. I think that thanks to this the web is going to become very animated very soon. You should implement this in popmotion asap IMO.

[mattgperry]

Well, we'll see. I think the web is going to be very animated soon, too. I haven't played with the MorphSVG plugin but I'm not sold on the number of use cases you describe. For instance, button up/down - the most obvious and nature thing is to rotate the arrow. But morphSVG will look very off in the effects it produces there. The same with checkboxes - the most obvious thing to do there is use drawPath, morph will look weird.

At the end of the day it's not a magic bullet, it's very hard to do, and I have limited time to work on this so I simply have to pursue a "bang for buck" strategy here. I do want this functionality, it just isn't priority number 1.

Finally I'll point out that Popmotion is fully open source, very extendable and you probably know exactly as much about SVG path maths as me, so any help in this area would be incredibly appreciated :)