walk animation

[JDmko]

Hello everyone,

I'm a newbie and I'm learning gsap, he is great!

My question is, it is possible to animate walking cycle with change path code in SVG code? see codepen. I inserted SVG to HTML , path id="left" its left leg and path id="right" its right leg.

I want in timeline change paths line d="m-791.97 bla bla ... 

 

I attach gif animations.

 

I think another way, load svg with all cycles walking animation and in timeline changin opacity for each frame.

 

I apologize for my terrible English.

 

thank you

Martin

See the Pen yZKLPM by jdmko (@jdmko) on CodePen

[Rodrigo]

Hi Martin and welcome to the GreenSock forums.

 

It is possible but not the easiest thing to do, not the hardest neither, so don't be discouraged.

 

One of our superstars @Diaco came up with this sweet walking SVG animation:

 

See the Pen RaXRdE?editors=0010 by MAW (@MAW) on CodePen

 

Is worth noticing though that His setup is far more complex than yours, so achieving something similar should come easier in your case. Unfortunately I'm far from being a Morph SVG expert (in fact I've never used that particular plugin in production just some simple tests), so I can't give you any specific directions on the subject, but start simple, first create a tween that flex the leg in one direction, then in the opposite direction and so on.

 

Hopefully Diaco's pen will be enough to get you started.

 

Happy Tweening!!

[JDmko]

Great, thank you Rodrigo, it's a completely different way of thinking, but this will be usable.