Wavy SVG Text on Scroll

Code Block

<svg id="text-container" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="32">
    <textPath id="text-path" href="#text-curve" startOffset="200">
      * Keyframers really know animation.
    </textPath>
  </text>
</svg>

Advanced Code Injection > Footer

<script>
console.clear();
var textPath = document.querySelector('#text-path');
var textContainer = document.querySelector('#text-container');
var path = document.querySelector( textPath.getAttribute('href') );
var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);
</script>