title: How can I give this blob svg a scroll morph effect?
body: <p>I currently have a blob in the background of my website and I'd like to morph it and make it interactive as the user scrolls down the page, what can I add to do this? ATM, the blob is animated but not on scroll.</p>
  
  <p>Here is the html</p>
  
  <pre><code>&lt;div class="morph-wrap"&gt;
                &lt;svg class="morph" width="1400" height="770" viewBox="0 0 1400 770"&gt;
                      &lt;path
                            d="M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z" /&gt;
                &lt;/svg&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>/* SVG Morph */
  .morph-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  
  .morph {
    position: relative;
    height: 100%;
    fill: rgb(33, 33, 33);
    flex: none;
    animation: animate 5s linear infinite;
  
  }
  
  @keyframes animate {
    0% {
      transform: scale(1) translate(10px, -30px);
    }
  
    38% {
      transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
    }
  
    40% {
      transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
    }
  
    78% {
      transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
    }
  
    80% {
      transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
    }
  
    100% {
      transform: scale(1) translate(10px, -30px);
    }
  }
  </code></pre>