SUSPEND ON VISIBILITY CHANGE demo seems not right

[HomyeeKing]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://animejs.com/documentation/#visibilitychange
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
when switch to false, I think the animation should stop

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] macOs
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 114.0.5735.198

Additional context
Add any other context about the problem here.

[different55]

That's the opposite of how it works. When set to true, it will stop when visibility is lost. When set to false, it continues regardless.

[HomyeeKing]

for me, no matter set true or false, the animation keeps running

[different55]

That might be due to your browser, it functions fine on Firefox on macOS. I wouldn't be surprised if Chrome (if that's what you use, you didn't say) does something to interfere with that functionality but I can't find any documentation if it does.

[GalahadXVI]

I would love to be proven wrong but I don't believe this is possible any more.

#701 solved this issue by fixing the event handling for the 'visibilitychange' event.

However, even if you force the page to always be visible despite the event happening, it still does not work.

// Code by Mwalek https://stackoverflow.com/a/74807252
let s = document.createElement("script");
s.setAttribute("id", "yourScriptID");
s.textContent = `
/**
 * Monitors changes to the page visibility.
 */
document.addEventListener('visibilitychange', () => {
  /**
   * Uncomment this line to debug whether the
   * Page Visibility API is being spoofed.
   * 
   **/
   console.log('Document.hidden = "${document.hidden}".');
    Object.defineProperty(document, 'visibilityState', {
        value: 'visible',
        writable: true,
    });
    Object.defineProperty(document, 'hidden', { value: false, writable: true });
  });`;
(document.head || document.documentElement).appendChild(s);

I'm assuming this is because requestAnimationFrame() is paused by default for most browsers to stop battery drainage.

See here: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.