How to sync my animateMotion with my CSS animation? - css

Question

I did not expect that, the goal would be to have the square make the path disappear. Both of my animation have a duration of 5s but they do not tie in.
I am new to svg animation so I did not find the solution to make it yet.
Any idea how I can make it ?
// Example class component
class Svg extends React.Component {
render() {
return (
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<path className="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" strokeWidth="4" stroke-miterlimit="10" fill="none"></path>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect>
<animateMotion id="forward"
xlinkHref="#circle"
dur="5s"
fill="freeze"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear">
<mpath xlinkHref="#motionPath"></mpath>
</animateMotion>
</svg>
</div>
);
}
}
// Render it
ReactDOM.render(
<Svg />,
document.getElementById("react")
);
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear reverse;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

instead of using one SMIL and one CSS animations do both SMIL.
Also you are animating for a path length of 1000 when the path length is 795.3
Yet another idea: you need to reverse the css animation because your initial stroke-dashoffset: 1000; Use an initial value of 0 and animate it to maxim length (795.3 - in my demo), Now you don't need to reverse it anymore,
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<path class="path" id="motionPath" d="M404.88,470.22v-390.53c-0.2,-19,-14.21,-33,-17.52,-36.19s-16.77,-15.19,-34.7,-15.45h-1.11c-28.65,0.35,-59.55,-0.12,-319.52,0h-4.03" stroke="#000" stroke-width="4" stroke-miterlimit="10" fill="none" stroke-dasharray="795.30" stroke-dashoffset="0">
<animate
attributeName="stroke-dashoffset"
from="0" to="795.30"
dur="5s"
fill="freeze"
begin="0"/>
</path>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50">
<animateMotion id="forward"
dur="5s"
fill="freeze"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
begin="0">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</rect>
</svg>

Answer 2

// Example class component
class Svg extends React.Component {
render() {
return (
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<path className="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" strokeWidth="4" stroke-miterlimit="10" fill="none"></path>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect>
<animateMotion id="forward"
xlinkHref="#circle"
dur="5s"
fill="freeze"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear">
<mpath xlinkHref="#motionPath"></mpath>
</animateMotion>
</svg>
</div>
);
}
}
// Render it
ReactDOM.render(
<Svg />,
document.getElementById("react")
);
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear reverse;
}
#keyframes dash {
to {
stroke-dashoffset: 200;
}
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I can't problem but you can use 200ms on your dash animation stroke-dashoffset. That will help you to fix the problem. And I will try to find where is the issue.