Proper way to pause animations when not in view

Question

I'm wondering whether there is a proper way to pause requestAnimationFrame animations when the user has scrolled and the animation is not in the view anymore?

requestAnimationFrame does this automatically when the browser displays another tab, but is it possible to do it when the user scrolls?

Answer 1

The only way is to divide your code in to chunk of small functions.

As you scroll down,keep track of how much scrolling is being done.

You can provide your own custom conditions and use window.cancelAnimationFrame() after the functions have been executed and are not in focus.

• How to stop a requestAnimationFrame recursion/loop?
• https://developer.mozilla.org/en-US/docs/Web/API/window.cancelAnimationFrame