I have an SVG animation done with anime.js on scroll event, the SVG is fixed at the bottom of the page, the idea is that when the animation finishes, I show new content that will be basically a continuation of the SVG.

The problem is that I don't know when to show the new content.

Things I am struggling with is that I can't animate the animation on scroll if I don't have content to scroll to, but then If I have content, I don't know how much a user has scrolled and when to show the new content.

Also, I have a problem where I have an animation duration of 1000ms, but the animation is laggier if I have more content on the page, so the more space I have for scrolling, the laggier the animation, and I think that this will affect the appearance of the new content also as the user can scroll way too far.