How To Create On Scroll Svg Animation With Stroke Dashoffset

In this topic,

we are going to see how to create on scroll SVG animation with stroke-dashoffset.

Step-1: Create Html Code in the index.html file.

<body>
  <div class="titles">On Scroll SVG Animation</div>
  <div class="boxs1">
    <span>Top Section</span>
  </div>
  <div class="stroke-svg">
    <svg width="1260" height="96" viewBox="0 0 1080 96" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path  d="M584.388 71.5701L560.898 94.9701C560.589 95.298 560.214 95.557 559.798 95.7301C559.381 95.9085 558.932 96.0004 558.478 96.0001C558.028 96.0004 557.582 95.9086 557.168 95.7301C556.752 95.557 556.377 95.298 556.068 94.9701L555.068 93.9701L532.448 71.4801C532.124 71.1675 531.866 70.7935 531.688 70.3801C531.517 69.9663 531.429 69.5229 531.429 69.0751C531.429 68.6272 531.517 68.1838 531.688 67.7701C531.953 67.1389 532.398 66.5995 532.967 66.219C533.536 65.8385 534.204 65.6337 534.888 65.6301C535.342 65.6297 535.791 65.7216 536.208 65.9001C536.626 66.0801 537.003 66.342 537.318 66.6701L555.098 84.3801V47.5701H561.808V84.5701L579.588 66.8501C579.909 66.5364 580.285 66.2854 580.698 66.1101C581.537 65.7634 582.479 65.7634 583.318 66.1101C583.731 66.2854 584.108 66.5364 584.428 66.8501C584.741 67.1716 584.992 67.5479 585.168 67.9601C585.34 68.372 585.428 68.8138 585.428 69.2601C585.428 69.7063 585.34 70.1481 585.168 70.5601C584.97 70.9404 584.706 71.2824 584.388 71.5701Z" fill="#D9D9D9" class="arrows-arrows"  style="transition-duration: 0.5s;"/>
      <path stroke="#D9D9D9" stroke-width="7" d="M1093.45 0.0400391V26.85C1093.45 32.4603 1091.25 37.8469 1087.32 41.85C1085.39 43.8142 1083.08 45.3747 1080.54 46.4408C1078 47.5069 1075.27 48.0573 1072.52 48.06H1030.41H829.808V41.06H1030.38H1072.24C1074.1 41.054 1075.94 40.6788 1077.66 39.9562C1079.38 39.2336 1080.93 38.1778 1082.24 36.85C1084.9 34.141 1086.39 30.4964 1086.39 26.7V0.100037L1093.45" fill="" stroke-dasharray="981" style="stroke-dashoffset: 990px; transition-duration: 0.5s; transform: translate(0px, -3px); " class="fourth-arrows"/>
      <path stroke="#fff" stroke-width="15" d="M450.308 41.04V48.04H63.4484H21.3483C18.5928 48.0384 15.8653 47.4885 13.3244 46.4224C10.7834 45.3562 8.48012 43.7951 6.54847 41.83C2.61428 37.8293 0.412188 32.4411 0.418348 26.83V0.0400391H7.41835V26.64C7.41433 30.4372 8.90528 34.0834 11.5685 36.79C12.873 38.1196 14.4289 39.1765 16.1456 39.8993C17.8624 40.622 19.7058 40.9962 21.5685 41H63.4484L450.308 41.04Z" fill="#D9D9D9" stroke-dasharray="981" style="stroke-dashoffset: 1460px; transition-duration: 0.5s;" class="first-arrows"/>
      <path stroke="#fff" stroke-width="15"  d="M630.688 41.04V48.04H491.448H449.348C446.593 48.0384 443.865 47.4885 441.324 46.4224C438.783 45.3562 436.48 43.7951 434.548 41.83C430.614 37.8293 428.412 32.4411 428.418 26.83V0.0400391H435.418V26.64C435.414 30.4372 436.905 34.0834 439.568 36.79C440.873 38.1196 442.429 39.1765 444.146 39.8993C445.862 40.622 447.706 40.9962 449.568 41H491.448L630.688 41.04Z" fill="#D9D9D9" stroke-dasharray="485" style="stroke-dashoffset: 715px; transition-duration: 0.5s;" class="second-arrows"/>
      <path stroke="#D9D9D9" stroke-width="7" d="M851.448 0.0400391V26.85C851.45 32.4603 849.249 37.8469 845.318 41.85C843.386 43.8142 841.083 45.3747 838.542 46.4408C836.001 47.5069 833.274 48.0573 830.518 48.06H788.408H630.688V41.06H788.378H830.238C832.101 41.054 833.943 40.6788 835.66 39.9562C837.376 39.2336 838.932 38.1778 840.238 36.85C842.898 34.141 844.388 30.4964 844.388 26.7V0.100037L851.448" fill="" stroke-dasharray="981" style="stroke-dashoffset: 985px; transition-duration: 0.5s; transform: translate(0px, -3px); " class="third-arrows"/>
    </svg>
  </div>
  <div class="boxs2">
    <span>Bottom Section</span>
  </div>
</body>

Step-2: Add CSS in<style>…</style> tag on index.html file.

.titles{
  font-size: 84px;
  font-weight: 500;
  padding: 100px;
}
body{
  text-align: center;
}
.boxs1, .boxs2 {
  width: 100%;
  border: 1px solid #eee;
  background: #ddd;
}
.boxs1 span, .boxs2 span {
  font-size: 68px;
  display: block;
  margin: 100px;
}
.stroke-svg{
  margin-bottom: 150px;
}
.arrows-arrows{
  visibility: hidden;
  opacity: 0;
}

Step-3: Add jQuery in<script>…</script> tag on index.html file.

In this animation,

First I have declared the scrollPos variable, and this variable gets the window scroll position.
Then, I have declared svgpos1 variable, in this variable is getting section top position.
I have subtracted 300 from the position of the section in the svgpos1 variable because I want the position 300px earlier than the top position of the section.
Then, I have declared svgpos2 variable, In this variable in I add svgpos1 value + 100
Then, I have declared svgpos3 variable, In this variable in I add svgpos2 value + 100

The animation will start when scrollPos position and svgpos1position are the same and the animation will end when scrollPos position and svgpos3 position are the same.

On scroll, I have reduced the stroke-dashoffset in the path.

jQuery(window).on('scroll', function () {
      var scrollPos = jQuery(this).scrollTop();
      var svgpos1 = jQuery(".boxs1").offset().top - 300;
      var svgpos2 = svgpos1 + 100;
      var svgpos3 = svgpos2 + 100;

      if(scrollPos > svgpos1 && scrollPos < svgpos2){
        jQuery(".first-arrows").css("stroke-dashoffset", 1155);
        jQuery(".second-arrows").css("stroke-dashoffset", 635);
        jQuery(".third-arrows").css("stroke-dashoffset", 850);
        jQuery(".fourth-arrows").css("stroke-dashoffset", 850);
      }else if(scrollPos > svgpos2 && scrollPos < svgpos3){ 
        jQuery(".first-arrows").css("stroke-dashoffset", 981);
        jQuery(".second-arrows").css("stroke-dashoffset", 485);
        jQuery(".third-arrows").css("stroke-dashoffset", 718);
        jQuery(".fourth-arrows").css("stroke-dashoffset", 680);
        jQuery(".arrows-arrows").css({"visibility":"visible","opacity":"1"});
      
      }else if(scrollPos > svgpos3){ 
        jQuery(".first-release-intelligence-animation-svg .arrows-arrows").css({"visibility":"visible","opacity":"1"});
      }
      else{
        jQuery(".first-arrows").css("stroke-dashoffset", 1460);
        jQuery(".second-arrows").css("stroke-dashoffset", 715);
        jQuery(".third-arrows").css("stroke-dashoffset", 985);
        jQuery(".fourth-arrows").css("stroke-dashoffset", 990);
        jQuery(".arrows-arrows").css({"visibility":"hidden","opacity":"0"});
      } 
    });