Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JDmko

walk animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Webp.gif.80250daa93677b6b2527fba9ac0b955c.gif

 

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

Link to comment
Share on other sites

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!!

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×