У меня есть svg-анимация, созданная с помощью svgator.
Мне нужно анимировать svg при прокрутке, когда он находится в области просмотра.
Я думаю, что его можно использовать isInViewport. js , но каков полный код?
Здесь вы можете найти код svg (измененный как указано в рекомендациях svgator для работы на wordpress):
https://codepen.io/simo2606/pen/rNVxyjd
На веб-сайте svgator они дают Эти признаки: 1. Чтобы определить, находится ли элемент в видимой части экрана, когда кто-то прокручивает вашу страницу, сначала вы должны рассчитать положение элемента и убедиться, что эти координаты находятся в области просмотра. Вы можете прочитать эту статью, в которой объясняется, что вам нужно сделать для этого шага.
https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
По завершении первого шага необходимо изменить свойство состояния воспроизведения анимации CSS с «приостановлено» на «запущено» с помощью JavaScript. Эта статья поможет вам начать.
https://css-tricks.com/controlling-css-animations-transitions-javascript/
(https://www.svgator.com/help/getting-started/how-to-animate-svg-on-scroll)
Пожалуйста, кто-нибудь может мне помочь?
Большое спасибо