Animation cœur on scroll

Bonjour,

J'ai besoin d'aide pour animer le coeur: le but est de commencer l'animation seulement quand on scroll vers la section où le coeur se trouve.

Code js:

(function($) {
$(document).ready(function() {
const $heart = $('.inject-heart');
$heart.parent().addClass('position-relative');
// $heart.append('<img data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="heart" src="' + stylesheet_directory_uri + '/dist/images/icons/heart.svg" />');
$heart.append('<svg data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556.3 300"><path d="M527.9 202.6c-63.8 44-132.5 44.6-194.2 27.8-27.3-7.4-54.1-18.7-77.8-34-22-14.2-44.3-31.9-57.9-54.8-5.9-9.9-10.1-21.2-9.8-32.8.3-8.3 3-16.6 8.3-23.1 7.5-9.1 19.8-13.6 31.5-12.5 11.7 1.1 22.7 7.4 30.3 16.4 4.6 5.5 12.4 18 10.4 25.9-1 4.2-5.2 6.6-7.5 4.4-8.3-8.3 17-39.4 40.4-43.3 18.6-3.2 37.8 4.9 43.3 24.3 3.8 13.2.4 27.7-6.3 39.7-9.4 17-24.3 31.3-39.2 43.6-23.5 19.4-52.3 31-82.3 36.3-27.8 4.9-56.5 4.7-84.5 1.8-23.5-2.4-46.7-6.8-69.5-12.9-11.9-3.2-24.8-6.8-34.8-13.7" fill="none" stroke="#fa644b" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"/></svg>');


const $greenHeart = $('.green-heart');
$greenHeart.addClass('position-relative');
$greenHeart.append('<svg data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="green heart" xmlns="http://www.w3.org/2000/svg" width="1912.382" height="641.597" viewBox="0 0 1912.382 641.597">\n' +
' <g id="icon-coeur" transform="translate(1.391 1.032)">\n' +
' <path id="PNG_picto_coeur" d="M1937.9,567.585c-243.86,167.95-506.449,170.24-742.282,106.114C1091.27,645.452,988.833,602.32,898.246,543.919c-84.09-54.2-169.326-121.764-221.309-209.174-22.551-37.789-38.6-80.921-37.458-125.2,1.147-31.681,11.467-63.363,31.725-88.174,28.667-34.735,75.681-51.912,120.4-47.713s86.765,28.246,115.814,62.6c17.582,20.994,47.4,68.707,39.751,98.861-3.822,16.032-19.876,25.192-28.667,16.795-31.725-31.681,64.978-150.392,154.419-165.278,71.094-12.215,144.481,18.7,165.5,92.754,14.525,50.385,1.529,105.732-24.08,151.537-35.929,64.89-92.881,119.474-149.833,166.423C974.691,571.4,864.61,615.679,749.942,635.91c-106.259,18.7-215.958,17.94-322.981,6.871-89.823-9.161-178.5-25.956-265.647-49.24C115.83,581.326,66.523,567.585,28.3,541.247" transform="translate(-28.3 -73.037)" fill="none" stroke="#12d7ab" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>\n' +
' </g>\n' +
'</svg>\n')
});
})(jQuery)


et code css (class= «homepage-ping»):

.homepage-ping .heart path{
stroke-dasharray: 1041;
stroke-dashoffset: 1041;
animation: draw 3s linear forwards;
}

@keyframes draw {
to{
stroke-dashoffset: 0;
}
}

.green-heart .green{
position: absolute;
top:20%;
left:0;
z-index:1;
}

.green.heart path{
stroke-dasharray: 3980;
stroke-dashoffset: 3980;
animation: draw 5s linear forwards;
}

@keyframes draw {
to{
stroke-dashoffset: 0;
}
}


Merci d'avance