I have an SVG animation that animates when we reload a page
But the animation should apply when I scroll down and when we scroll up the animation should keep on applying i tried using begin element with JavaScript but it's not working is there any way we can do that ?
could anyone help me in this issue ? Thank you in advance .
6 Replies
here is my code for javascript
<script>
$(window).on("scroll", function () {
var windowHeight = $(window).height()
var windowTop = $(window).scrollTop()
var windowBottom = windowTop + windowHeight
$(".scroll-animation").each(function () {
var element = $(this)
var elementHeight = element.outerHeight()
var elementTop = element.offset().top
var elementBottom = elementTop + elementHeight
if (elementBottom > windowTop && elementTop < windowBottom) {
var animation = element[0].getElementById("animation")
animation.beginElement()
animation.endElement()
}
})
})
</script>
not really familiar with svg animations, but calling begin and end right after each other seems like it would start and then immediately stop the animation?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yes it should stop immediately
can we use Intersection Observer API ? for this ?
thank you
but if those lines run immediately after each other, the animation wouldn't even start right? Or am I misunderstanding the animation api?
we need to specify some time interval
then we can get some animation