I’ve set up a lightbox, overlay, etc. It is meant to appear on any page that the user enters the site on (one of those - agree to the t&c, close the pop up, then see the site’s content). Issue is that I have animation on the site (para 1 fade in, para 2 fade in, etc as someone scrolls down a page). The first scroll animation all plays while the lightbox is open and I want to find a way to have it start only after the lightbox is closed. A few things I’ve tried:
a) Place the light box on a blank page that’s hidden from the menu → close the light box button links to the site’s home page. This allows the home page to load fresh rather than run in the background. The issue here is that if someone reaches the site through any internal page, they still need to see the pop up and now closing it redirects them to the home page.
b) Delay the animation a bit on the page so that it starts playing by the time the pop up box is closed. But I can’t really guess how long someone will take to read the t&c and close the box. Moreover, if I enter the site, go back to the page that has the animation, the pop up won’t show a second time, but now the page animation is timed to play after a delay, so it just looks all wrong.
Basically need some help to figure how to make the page animation dependent on when the pop up gets closed.
Your page will always be active whilst you have a lightbox appearing over it.
You can look at passing data from the lightbox to the pate or vice versa, so that when the lightbox is closed you can use that event to start your page animation loading.
However, you would also need to write your code so that if the lightbox doesn’t popup, for example after they have agree to your t&c or they are moving from another page etc, that the page loads up normally and the page animation starts as it should with no delay.
See the Wix Window API for more info as shown below.
https://www.wix.com/corvid/reference/wix-window.html
How do I pass data between a page and a lightbox?
When you open a lightbox using the openLightbox() function, you can pass an object containing data to be used in the lightbox. In the lightbox's code, you call the getContext() function to retrieve the data sent by the openLightbox() function.
When you close the lightbox using the close() function, you can pass an object containing data to be used by the page that opened the lightbox. This data is retrieved from the resolution of the Promise returned by the openLightbox() function.
If you do this option, then please make sure that you read the close function info very carefully as you need to make sure that you disable all the standard closing parts.
The other option would be not to have such a large lightbox over your website and just have it at the bottom of your screen which gives the user the choice of either agreeing to your t&c whilst still leaving most of your screen visible so that they can see the animations etc, or going to another page to read them fully for example.
Or finally, just design your home page so that it does not have animations that are affected when a lightbox has to be shown first over the page.
Plus, here is a Corvid example for a lightbox one time popup.
https://support.wix.com/en/article/corvid-tutorial-creating-a-one-time-popup
@givemeawhisky Thanks for all this information and guidance! Will try this out.