How to reverse animate motion? - animation

Question

Why my animation doesn't start from the top to the bottom ? How to reverse it correctly ? I don't know what I should change. (I tried keyPoints="1;0" keyTimes="0;1" which didn't work)
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350"><path d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"></path><rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect><animateMotion xlink:href="#circle" from="50" to="450" dur="5s" begin="0s" repeatCount="1" rotate="auto" fill="freeze"><mpath xlink:href="#motionPath"></mpath></animateMotion></svg>

Answer 1

It is necessary to remove from =" 50 " to =" 450 " since the length of the path of movement is determined by the length of the path mpath
The direction of movement of an object along a path depends on two parameters
keyPoints="1;0" - movement from start to finish
keyTimes="0;1"
keyPoints="0;1" - movement from end to start
keyTimes="0;1"
In the example below, JS is used only to handle the event of pressing the control buttons: forward and back
var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement();
}
var animation2 = document.getElementById("back")
function backSVG(){
animation2.beginElement();
}
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button />
<button id="btn2" onclick="backSVG()">Back</button />
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="50 0 500 350">
<path id="motionPath" d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" >
</path>
<rect id="circle" x="0" y="-25" rx="15" ry="15" width="50" height="50"></rect>
<!-- Forward motion animation -->
<animateMotion id="forward"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
<!-- Backward motion animation -->
<animateMotion id="back"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>

Answer 2

Here is the reverse you want.
I modified the shape a little but you can modify it back again.
Hope that this is the solution to your problem.
you can make it freeze too if you want.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350">
<g>
<path stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"
d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"/>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="60" fill="black"
stroke="black" stroke-width="1" transform="translate(-25,-10)">
<animateMotion path="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"
begin= "0s" dur="5s" repeatCount="1" rotate="auto" fill="freeze"
keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
</rect>
</g>
</svg>