SVG.js scale and move path in straight line

Question

How to make SVG.js path animation follow straight line when moving and resizing?

There is 2 part animation. Firstly text as SVG path is scaled up and moved to the center of rectangle. Later it needs to scale down to original size and move to opposite corner of the rectangle.

First part animates as needed but second part the text moves off the viewing area and then comes back.

let draw = SVG('reading-area');
var group = draw.group();

original = group.svg(getSvgText());
original.animate(1000, '-', 0).move(229, 164).scale(3);
original.animate(2000, '-', 1000).scale(1).move(50, 315);

Here is working example. https://jsfiddle.net/ujwk8r7z/6/

Answer 1

Adding 2 nested groups where outer group is moving and inner group is scaling gets the effect that is needed.

let draw = SVG('reading-area');
let group = draw.group();
let innerGroup=group.group();
original = innerGroup.svg(getSvgText());
group.animate(1000, '-', 0).move(229, 164)
original.animate(1000, '-', 0).scale(3);
group.animate(1000, '-', 0).move(50, 315)
original.animate(1000, '-', 0).scale(1);

https://jsfiddle.net/ujwk8r7z/7/