Following your advise I set transformOrigin to :
var transformOriginLeft = "right center";
var transformOriginRight = "left center";
Then everything was fine until I scale any path. Looks like a scale reset the svgOrigin or something like that. So I had to set it in every tween.
Finally figured out that I had a SVG with a viewbox -37.4 94 670.1 653.9. Here is how I set svgOrigin.
var svgOriginCustom = (335.05 - 37.4) +' '+ (326.95 + 94);
Now a tween looks like that :
this._timelineLeft.fromTo(this._$step1L, hD,
{ opacity: 0, scale: 0.5, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft },
{ opacity: 1, scale: 1, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }
);
And it works everywhere
