Animate along motionpath in responsive SVG

Question

I'm trying to make an animation with greensock. I want to move a balloon over a painted line and the graphic/animation shall be scalable.

I have a problem to align the balloon svg to the painted line. As soon as the browser width does not equal the svgs viewport width, the animation does not work. I'm pretty sure that's not the real spirit of scalable (!) vector graphics. So what am i doing wrong? How can I align the balloon to the line, also when the svg's size is changing?

Here is a simplified codepen of the little project:

TweenMax.to("#balloon", 3, {
    bezier: {
      values: MorphSVGPlugin.pathDataToBezier("#Path23",{
        //matrix:[1.5,0,0,1.5,0,scaleX+"%"],
        offsetX: -50,
        offsetY: -50,
       align:"#balloon"}),
      type: "cubic"
    },
    ease: Linear.easeNone,
    repeat: -1,
    force3D: true
  });

CodePen

Answer 1

The problem was, that i was using two svgs instead of one container. Also the transformOrigin made it work in the end. I updated the codepen. Now it works.