[Help]: Autoplay continues to run, when slider is not visible

[openscript]

It seems like that Embla with the Autoplay plugin keeps running in the background, when it's no in the viewport or the tab is not visible.

Peek.2022-01-11.14-53.mp4

In suggest two new options for autoplay:

• stopWhenNotInViewport: boolean: Stops autoplay when slider is not in viewport and resumes when it is again.
• stopWhenPageNotActive: boolean: Stops autoplay when the page where the slider is embedded is in the background and resumes when it is in the foreground again.

[davidjerleke]

Hi @openscript,
Thank you for your suggestions 👍🏻.

About the in viewport suggestion

I’m personally not sure about how to approach this. Because the Embla core library doesn’t provide any feature for determining if it’s in viewport or not. I based this decision on the fact that most devs that build websites use some sort of in view library not just for their carousels, but also images and all sorts of stuff. Of course, some devs also choose to build their own in view utility. So the bottom line here is that adding this logic to Embla or its plugins duplicates that kind of logic. And if you have 10 libraries in your project it adds upp pretty quickly.

But with that said, I don’t really have any strong opinions about adding this functionality to the autoplay plugin or not. If you think it adds more value adding it compared to leaving it out, I’m open to adding this feature to the plugin.

If we add this to the plugin we should make sure to update the plugin page so it’s clear to users that they need to polyfill intersection-observer for browsers that don’t support it.

About the tab not active suggestion

You’re actually wrong about this 🙂. The call to running the next play is wrapped in an requestAnimationFrame. And requestAnimationFrame doesn’t run when a tab is inactive, just like the Embla scroll animation won’t run when the tab is inactive because it’s using requestAnimationFrame to scroll. What you’re seeing in the video you shared is that the play next function runs immediately as soon as you activate the tab, fooling one to believe it was actually running in the background. Additionally, if you leave a tab where Embla is scrolling and haven’t settled yet, you’ll see that it will continue from where it was when you left the tab, as soon as you activate it again.

Best
David

[openscript]

Hi @davidjerleke and thank you for taking the time to explain it in detail.

Viewport suggestion ✔️

I agree, that's not nice to integrate it into Embla, because - as you said - it should and can be handled from the outside.

Tab not active suggestion ❓

Okay, I understand, nothing is rendered when the viewport is not visible. Is it maybe possible, that the timer of autoplay keeps running, when the tab is not active? In the video I've maybe not waited long enough, but when you wait for half an hour or so, it rushes through several slides at once instead of just finishing the current slide and continue normally.

Strangely when my computer is running for a while and the tab is open but not active and I come back to the tab with the sliders, they just disappear. I tried to investigate this, but it's quite hard to understand what is happening. It seems like just to many frames need to be rendered and the browser denies to do it.

Robin

[davidjerleke]

@openscript thanks for a detailed explanation of how you reproduced the problem 👍🏻.

I think we should get rid of the requestAnimationFrame wrapper in the Autoplay plugin then. The first idea that comes to mind is replacing it with the document visibilityChange event. I think we should experiment with that and see if the problem goes away. Or do you have a different idea about how what we should try?

Best,
David

[openscript]

I'm not sure if requestAnimationFrame should be abandoned. I think it's the right tool, because as I understand the browser handles it independently from the other thread where the rest of the JavaScript is running in and applies a lot of logic when to render and when not.

In my opinion, the problem is the timer which doesn't stop running when the tab becomes inactive. Right now I don't know how to fix the problem, but I will try out a few things. 😄

[openscript]

Should I open an issue? The problem can be reproduced in this sandbox:
https://codesandbox.io/s/embla-carousel-autoplay-react-forked-openscript-ltd-slider-8h5bh?file=/src/js/Footer.js

After a while the slider content is just not there anymore:

[davidjerleke]

@openscript I didn’t mean the animationFrame that runs the scroll animation, I meant the one that wraps the timer call 🙂.

It makes sense to track this in a new issue!

[davidjerleke]

• Solved in [Bug]: Autoplay timer keeps running, even when viewport is inactive #271.

[ancashoria]

I'm still experiencing this bug. Even updated to version 8.3.0 and it's still happening.

[davidjerleke]

@ancashoria what bug are you experiencing? Have you read the entire conversation in this issue?

Please share steps to reproduce the bug you’re talking about.