Function that triggers when the user is in a different browser tab

Ask the community
, ,
1

I’m having trouble with
a gallery with custom boxes that change everytime the gallery index changes, showing an “arc” animation.

Working in
Wix Studio Editor

Site link

What I’m trying to do
On the homepage of my website I have a gallery showing 5 pictures in rotation.

Every time the gallery index changes, I set a custom box to appear while the previous index’s one disappears.

When I change a broser tab, if my website’s tab is in the gallery, the gallery keeps changing index, and when I come back, I see multiple boxes on top of each other.

I set the gallery to pause onViewPortLeave and it works fine, but I see no code working when I’m in a different browser tab to either pause the gallery or set the boxes to disappear and when coming back to my website’s tab, to reappear.

Is there a way to do so?

What I’ve tried so far
I tried searching the Velo references, but got no results.

Extra context
I attach a screenshot showing 2 overlapped boxes.

Problem
Problem1920×905 648 KB

2

Hi, @giannaccinilorenzo !!

I can definitely see the issue you’re experiencing on your site. It would be helpful if you could share the code you’re currently using; that way, community members can provide more specific advice. :slightly_smiling_face:

Personally, I suspect that browser tab switching is somewhat beyond what Velo can natively control, so it might not be something you can “fix” with Velo alone. However, I believe you could address this by rethinking your display logic to make it more robust.

I’m not sure exactly how you’ve structured your elements, but if you are stacking multiple boxes on top of each other, using a Multi-State Box might be a great solution. Since a Multi-State Box is designed to only show one state at a time, it should prevent multiple containers from overlapping, even if there’s a delay in the browser’s execution. :innocent: