基于GSAP实现滚动触发SVG多形态过渡动画的技术求助

希望复刻某网站中随滚动方向变化的SVG变形动画，目前已通过GSAP实现滚动触发的三角形到圆形的morphSVG过渡，还需添加到矩形的过渡以实现侧边扁平化效果，现有实现示例见CodePen。

现有实现代码 #

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Gsap Scroll Morphing</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="Domestic_Dromedary_silhouette.svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 9 80 800 400;" xml:space="preserve">
    <style type="text/css">
      .st1 {
        fill: black;
      }
    </style>

    <!--SHAPE #1-->
    <path id="circle" class="st1" d="M 0 0 A 1 1 0 0 0 1000 0" />

    <!--SHAPE #2-->
    <path id="hippo" class="st1" d="M 0 0 L 500 500 L 1000 0" />

    <div id="v-spacer-1" class="v-spacer">

    </div>
    <div id="v-spacer-2" class="v-spacer">

    </div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/CSSRulePlugin.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
    <script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
    <script src="./script.js"></script>

</body>

</html>

CSS #

@import url("https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
  margin: 0;
}
.v-spacer {
  height: 90vh;
  width: 100%;
  scroll-snap-align: center;
}

svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

path {
  fill: linear-gradient(to right, #ff0000, #00ff00);
}

#svg2 {
  position: fixed;
}

#circle {
  visibility: hidden;
}

JavaScript #

// gsap.to()... infinity and beyond!
// To learn how to use GSAP, go to greensock.com/get-started

gsap.registerPlugin(ScrollTrigger);

var tl = gsap.timeline();
hippo = document.getElementById("hippo");

tl.to(
  hippo,
  {
    morphSVG: "#circle",
    duration: 1,
    scrollTrigger: {
      trigger: "#v-spacer-1",
      markers: false,
      scrub: true,
      start: "top top"
    }
  },
  "+=1"
);

内容的提问来源于stack exchange，提问作者The Old County