У меня есть анимация SVG на веб-сайте, который я создаю. Это строка, которая должна прокручиваться вниз на go. Я нашел много информации в Google. Так что это вроде работает. Но я хочу, чтобы он был анимирован, когда он виден в окне просмотра. Теперь анимация уже началась. Я также нашел код, чтобы увидеть, есть ли svg в окне просмотра. Но я не могу смешать их вместе и заставить это работать. URL: https://no-rocketscience.com/home/
SVG
<svg xmlns="http://www.w3.org/2000/svg" id="star-svg" >
<g>
<path id= "star-path" fill="none" stroke="#d7e6ff" stroke-width="4" d="M125.32,29.02c-17.75,24.78-33.52,51.55-43.51,80.94c-10.58,31.13-13.8,64.5-8.35,97.15
c5.79,34.71,20.45,67.54,38.32,97.01c16.14,26.61,35.44,50.76,54.39,75.12c18.2,23.39,36.09,47.31,49.67,74.11
c7.02,13.85,12.83,28.39,17.1,43.45c3.81,13.43,7.05,27.54,7.21,41.64c0.24,20.68-6.78,40.12-18.07,56.77
c-12,17.7-27.75,32.21-43.79,45.64c-16.94,14.19-34.67,27.29-51.53,41.58c-15.4,13.06-30.58,27.27-41.63,44.77
c-11.27,17.85-15.34,37.07-14.04,58.38c1.67,27.36,9.58,53.78,20.75,78.36c11.39,25.06,25.97,48.32,41.21,70.89
c15.02,22.25,30.86,43.87,45.43,66.46c13.05,20.23,25.41,41.48,33.09,64.73c6.95,21.03,9.48,43.85,4.32,65.68
c-5.72,24.21-24.69,43.65-41.14,60.28c-19.75,19.97-80.95,61.69-83.63,128.77c-2.68,67.08,29.46,133.38,32.04,140.19"/>
css
#star-svg {
top: 0%;
left: 0%;
width: 600px;
height: 1400px;
}
JS
Анимация вокруг этого названия: Hoe No Rocket Science werkt
Может ли кто-нибудь помочь мне запустить анимацию, когда она находится в окне просмотра?
Спасибо!