Animation In Html,css,js

I included a SVG on scroll animation that looks like this: The problem I am facing is that since my website has a lot of content, I want to start this animation at a certain point

Solution 1:

In your scroll listener, you should check if the element is scrolled into view, if not, wait to run the animation until the element is in view on the page.

You can use this function to determine if an element is in view:

functionisScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

(from https://stackoverflow.com/a/488073/14981680)