Tool to create a moving svg so I can code it?

[JasonD]

Good morning GSAP Family!  I'm going to really need to explain what I'm looking for to see if anyone knows  of anything.  

 

I've really started to do more svg animations, and would love to know if there is a way for me to take say an SVG, that has a person who is "running" ( for example )  and move their legs, hands head etc, into a different position, get that path data, move it again, get THAT path data...etc....so I can create the animation using GSAP?

 

I understand how to use morphSVG, but getting the different states of a polygon from one state to another is a mystery to me, other than hand drawing, which to be honest is not going to happen.

I have access to all of the Adobe suite software if that helps. I've looked into "animate" ( the old flash program) and there are some cool tools that allow me to create tweens of the states I'm looking for, but no way as far as I can tell to get the path data from those tweens so I can animate them.  I'm probably missing some pro trick here, so any advice or direction is much appreciated.

 

Thanks in advance,

Jason

[geedix]

Hi Jason, I do lots of SVG  animation, and this is a point of frustration for me too. My usual process is to do make assets in Illustrator, animate with gsap, and fine-tune positions in Chrome dev tools along with the gsap dev tools for pause and play. 

 

It's hard to understand why Adobe doesn't make Animate useful for this. You can export individual svg frames with 'export image (legacy)', but they are not pretty to see in a code editor. I prefer to stick with Illustrator and lots of layers.

I hope you get some helpful responses! 

[JasonD]

I have to be honest, this isn’t what I was hoping for.  I don’t have the orig artwork (layered) so the points are complete now.  Your solution is fine if we have the layers file, and if not I have to re-draw it.  
 

I appreciate the response though.  Maybe someone out there has the magic answer we’ve been looking for.

[Cassie]

Hard to recommend without seeing the SVG, but I usually set things up in illustrator so that I can copy paste and create artboards with manually set up step by step positions to animate to. Tweaking shapes or path points as I go

Unfortunately SVG setup is the hardest and most time consuming bit of setting up an animation.

 

Character rigging with SVG and GSAP is also really tricky. There aren't any bones so you have to really pay attention to grouping and transform origins.

 

I'd be interested to see what the file looks like that. you're trying to manipulate.

Puppet warp in illustrator may be useful?

@PointC wrote an article on that I seem to remember?...

[Cassie]

Quote

 I don’t have the orig artwork (layered) 

This sounds awkward to me, are you trying to move around lots of different parts of an SVG that's just one composite path? If so bail out of that right now, that sounds like a real bad time.

[Cassie]

BUT. For better or worse - That does sound like puppetwarp.

I personally think you'd have more luck separating out the bits that need to move into their own shapes, especially for a running man, otherwise he's just gonna get a bit weird and bendy.

[PointC]

52 minutes ago, Cassie said:

@PointC wrote an article on that I seem to remember?...

I'm not sure if I wrote about it, but I did post this simple puppet/morph demo .

See the Pen gOgGQrP by PointC (@PointC) on CodePen

 

Yeah - I'm with @Cassie on this - the puppet warp may work, but breaking it apart would probably be the wisest direction. As with most animations, it's all about the asset prep.

 

Rive has bones so character animation should be a little easier. Spine is another option. 

 

Best of luck.

[JasonD]

Thanks ya'll.  I'll take a look at puppet warp.