In this topic,
we are going to see how to create on scroll SVG fill animation.
Step-1: Create Html Code in the index.html file.
<body>
<div class="full-layout">
<div class="Title">On Scroll Fill Animation</div>
<div class="box1">
<span>Top Section</span>
</div>
<div class="fill-svg">
<svg width="463" height="466" viewBox="0 0 463 466" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M94 212.5H374V228.5H94V212.5Z" fill="#A9A4F0" class="second-scroll-fill"/>
<path d="M18.9993 266.82V423.5H34.9993V266.82C34.9993 256.661 39.0342 246.919 46.2166 239.734C53.3989 232.55 63.1406 228.512 73.2993 228.51H94L93.9985 212.51H73.2993C58.902 212.528 45.0999 218.257 34.9204 228.438C24.7409 238.619 19.0152 252.423 18.9993 266.82Z" fill="#A9A4F0" class="third-scroll-fill"/>
<path d="M374 212.502V228.5H389.746C403.944 228.487 417.557 222.764 427.597 212.586C437.637 202.409 443.285 188.609 443.301 174.215V42L427.52 42V174.215C427.52 179.244 426.543 184.223 424.645 188.869C422.746 193.515 419.964 197.736 416.456 201.291C412.948 204.847 408.784 207.667 404.201 209.59C399.618 211.514 394.706 212.503 389.746 212.502H374Z" fill="#A9A4F0" class="first-scroll-fill"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 435.612 138.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 435.612 113.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 435.612 86.3846)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 435.612 60.3846)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 435.612 160.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 434.416 184.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 424.416 203.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 403.416 217.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 380.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 264.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 143.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 358.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 242.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 121.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 312.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 196.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 75.4163 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 335.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 219.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 98.4163 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 289.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 173.416 220.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 49.885 227.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 31.885 246.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 271.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 297.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 324.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 351.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 378.385)" fill="white"/>
<ellipse opacity="0.5" rx="2.88464" ry="2.885" transform="matrix(5.52317e-08 1 1 -3.4594e-08 26.885 405.385)" fill="white"/>
<g filter="url(#filter0_d_12216_11430)">
<circle cx="28" cy="438" r="24" fill="white"/>
</g>
<circle cx="27.9986" cy="438.001" r="17.6471" fill="url(#paint1_linear_12216_11430)"/>
<g filter="url(#filter1_d_12216_11430)">
<circle cx="435" cy="28" r="24" fill="white"/>
</g>
<circle cx="434.999" cy="28.0006" r="17.6471" fill="url(#paint2_linear_12216_11430)"/>
<defs>
<filter id="filter0_d_12216_11430" x="0" y="410" width="56" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12216_11430"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12216_11430" result="shape"/>
</filter>
<filter id="filter1_d_12216_11430" x="407" y="0" width="56" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12216_11430"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12216_11430" result="shape"/>
</filter>
<linearGradient id="paint0_linear_12216_11430" x1="94" y1="218" x2="27" y2="424" gradientUnits="userSpaceOnUse">
<stop stop-color="#E29688"/>
<stop offset="1" stop-color="#A9A4F0"/>
</linearGradient>
<linearGradient id="paint1_linear_12216_11430" x1="41.4697" y1="418.312" x2="11.1496" y2="453.148" gradientUnits="userSpaceOnUse">
<stop stop-color="#F26522"/>
<stop offset="1" stop-color="#AB47BC"/>
</linearGradient>
<linearGradient id="paint2_linear_12216_11430" x1="448.47" y1="8.3117" x2="418.15" y2="43.1479" gradientUnits="userSpaceOnUse">
<stop stop-color="#F26522"/>
<stop offset="1" stop-color="#AB47BC"/>
</linearGradient>
<linearGradient id="paint0_linear_12190_12040" x1="62.5" y1="1.21575e-06" x2="-2.40704e-06" y2="178" gradientUnits="userSpaceOnUse">
<stop stop-color="#E29688"/>
<stop offset="1" stop-color="#A9A4F0"/>
</linearGradient>
<linearGradient id="paint0_linear_12190_12071" x1="279" y1="10.4998" x2="-1.04202e-05" y2="8.9998" gradientUnits="userSpaceOnUse">
<stop stop-color="#E29688"/>
<stop offset="1" stop-color="#A9A4F0"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="box2">
<span>Bottom Section</span>
</div>
</div>
</body>
Step-2: Add jQuery in<script>…</script> tag on index.html file.
In this animation,
First I have declared the currntreleaseScrollPosanimation variable, and this variable gets the window scroll position.
then, I have declared firstscroll variable, in this variable is getting section top position.
I have subtracted 250 from the position of the section in the firstscroll variable because I want the position 250px earlier than the top position of the section.
Then, I have declared secondscroll variable, this variable is getting section top position and I subtracted 150 from the position.
Then, I have declared thirdscroll variable, this variable is getting section top position and I subtracted 50 from the position.
Then, I declare the fourth scroll variable, this variable is getting the section top position and I have added 50 from the position.
The animation will start when the currntreleaseScrollPosanimation position and firstscroll position are the same and the animation will end whencurrntreleaseScrollPosanimation position and fourthscroll position are the same.
And on scroll I one by one fill color in the path.
jQuery(window).scroll(function() {
var firstscroll = jQuery('.box1').offset().top - 250;
var secondscroll = jQuery('.box1').offset().top - 150;
var thirdscroll = jQuery('.box1').offset().top - 50;
var fourthscroll = jQuery('.box1').offset().top + 50;
var currntreleaseScrollPosanimation = jQuery(window).scrollTop();
if(currntreleaseScrollPosanimation > firstscroll && currntreleaseScrollPosanimation < secondscroll ) {
jQuery(".fill-svg .first-scroll-fill").css({'fill': 'url(#paint0_linear_12190_12040'});
jQuery(".fill-svg .second-scroll-fill").css({fill: '#A9A4F0'});
jQuery(".fill-svg .third-scroll-fill").css({fill: '#A9A4F0'});
}
else if(currntreleaseScrollPosanimation > secondscroll && currntreleaseScrollPosanimation < thirdscroll ){
jQuery(".fill-svg .second-scroll-fill").css({'fill': 'url(#paint0_linear_12190_12071'});
jQuery(".fill-svg .first-scroll-fill").css({fill: '#E29688'});
jQuery(".fill-svg .third-scroll-fill").css({fill: '#A9A4F0'});
}
else if(currntreleaseScrollPosanimation > thirdscroll && currntreleaseScrollPosanimation < fourthscroll){
jQuery(".fill-svg .third-scroll-fill").css({'fill': 'url(#paint0_linear_12216_11430'});
jQuery(".fill-svg .first-scroll-fill").css({fill: '#E29688'});
jQuery(".fill-svg .second-scroll-fill").css({fill: '#E29688'});
}
else if(currntreleaseScrollPosanimation > fourthscroll){
jQuery(".fill-svg .third-scroll-fill").css({fill: '#E29688'});
jQuery(".fill-svg .first-scroll-fill").css({fill: '#E29688'});
jQuery(".fill-svg .second-scroll-fill").css({fill: '#E29688'});
}
else{
jQuery(".fill-svg .second-scroll-fill").css({fill: '#A9A4F0'});
jQuery(".fill-svg .third-scroll-fill").css({fill: '#A9A4F0'});
jQuery(".fill-svg .first-scroll-fill").css({fill: '#A9A4F0'});
}
});
Review the below video.
I hope you guys found something useful ??
