向下滚动和向上滚动动画（变形）SVG

Question

我需要制作一个非常自然的动画，并向下滚动并向上滚动这三个SVG图像。（变形）在暂停滚动时动画应该平稳运行，并且在恢复滚动动画时也停止动画。< / p>

我需要提到的是这是一个React Js项目，用一些React 3rd库或带有Js的纯CSS来解决它会非常好：）

stage 0
<svg
  fill="#dee1ea"
  version="1.1"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  viewBox="0 0 2560 240"
  style={{ enableBackground: "new 0 0 2560 240" }}
  xmlSpace="preserve"
>
  <path d="M2560 113.3V0H0v154.4c290.9 59.6 739.3 91.3 1217.4 84.8C752.3 220.8 343.5 194 40.2 118.8c303 54.1 748.3 95.1 1244.8 95.1 513.2 0 971.8-43.3 1275-100.6z" />
</svg>
stage 1
<svg fill="#dee1ea" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 240"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>test</title><path class="cls-1" d="M2560,119.63V0H0V140.17c290.85,29.8,739.28,45.67,1217.44,42.41C752.3,173.4,343.45,160,40.25,122.41,343.27,149.47,788.58,170,1285,170,1798.21,170,2256.79,148.29,2560,119.63Z"/></svg>

stage2
<svg fill="#dee1ea" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 240"><title>test</title><rect width="2560" height="119.63"/></svg>