1

Anyone ever had any luck animating an SVG to wave?

Fastest drawing ever: http://cl.ly/XEtd

I've got an octopus, and I want to move the arms of it, but rather than just rotating around a point somewhere, I want to move the points of the path.

Is it literally a case of just settings the points, then settings the points to the next arm position and frame by frame it in CSS?

Andrew Lazarus
  • 989
  • 2
  • 16
  • 25
  • What about the obvious solution of just making individual paths for each arm position and animating the arms by showing and hiding each of the arm paths? Is there a reason you don't want to do it that way? – Paul LeBeau Aug 27 '14 at 22:44
  • Curious, did you ever solved this? Encountering a nearly identical scenario. – Gavin Nov 23 '16 at 20:23
  • Nothing at the time of this, but i would recomend using BodyMovin' – it's an after effects plugin for exporting animated SVGs – Andrew Lazarus Nov 23 '16 at 22:17

1 Answers1

0

If you don't mind using snap.svg, I think it's pretty easy to use it to do what you're trying to do, see this example:

How to animate path morphs using snap.svg

If you don't want to use snap or some similar library, you might be able to look at what it produces and get an idea how to do it by hand.

Community
  • 1
  • 1
OldGeeksGuide
  • 2,888
  • 13
  • 23