SVG path motion doesnt work

[reflex]

Hello,

 

I can't make work this example. I have SVG with path on which I want to move my "rocket", firstly I have two separate SVG, then I merged it to one.

 

I am trying it make it work for more than 4 horus ;]

 

Thank you very much.

 

Ref

See the Pen zLQYrw by reflexo (@reflexo) on CodePen

[PointC]

Hi @reflex 

 

Welcome to the forum.

 

The problem is you have a massive group transform on line 10:

 

 <g transform="translate(-508 -3551.334)">

 

You'll need to account for that with an x/y offset like this:

 

var motionPath = MorphSVGPlugin.pathDataToBezier(
  $("#how-i-do-it__graph__path"),
  { align: "#how-i-do-it__rocket", offsetY: -3551, offsetX: -508 }
);

 

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

 

Hopefully that helps. Happy tweening.

 

[reflex]

19 minutes ago, PointC said:

Hi @reflex 

 

Welcome to the forum.

 

The problem is you have a massive group transform on line 10:

 

 <g transform="translate(-508 -3551.334)">

 

You'll need to account for that with an x/y offset like this:

 

var motionPath = MorphSVGPlugin.pathDataToBezier(
  $("#how-i-do-it__graph__path"),
  { align: "#how-i-do-it__rocket", offsetY: -3551, offsetX: -508 }
);

 

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

 

Hopefully that helps. Happy tweening.

 

 

Awesome man, you are a lifesaver.

Dunno why, Adobe XD generated it with that transform. I will investigate it further.