Closing Lightbox Animation?

[user3250]

Hi guys Im trying to animate a lightbox when closing it with a fade out effect. I tried a few old codes I found around the forum but unfortunately nothing seems to work, the lightbox closes without animation. Im using Wix with Velo Javascript coding.
This is the last code I tried but no results for me:

import wixWindow from ‘wix-window’;

$w.onReady(function() {waitForLoading()})

function waitForLoading() {
setTimeout(() => {
$w(‘#lightbox1’).hide(‘fade’).then(()=>{
wixWindow.lightbox.close();
})
}, 3500);
}

Does anyone know how could I achieve this effect? I dont understand why Wix let us change the opening animation but no option for closing…

[onemoretime]

Hi, user3250 !!

I see , animations for lightboxes can be tricky. Instead of setting the animation on the lightbox element itself, try placing another box element (e.g., #boxInLightbox1) inside the lightbox and apply a fade animation to that element.

    let fadeOptions = {
        "duration": 3500
    }

    $w(‘#boxInLightbox1’).hide("fade",fadeOptions).then(()=>{
        wixWindow.lightbox.close();
    });

[user3250]

Hey! thanks for your reply! I also tried this, but nothing happened the lightbox close and the elements inside play no animation. I have no other elements in my page (im using a blank one to test these things) so I dont know if there could be something that affects the code for the animation of the elements inside the lightbox.

I also tried using a box container instead of a ligthbox. The problem here is that I have to reserve an space in the page for the box and hide it, and the lightbox its not phisically in the page but activates when clicking…

[onemoretime]

I see. I just tried it, and I was able to successfully run a fade-out animation in Wix Studio. In my case, I made the lightbox completely transparent, placed a box of the same size inside the lightbox, and applied the animation to that box.

When you mention “reserving space for the box on the page,” what exactly do you mean? In this case, the box element is assumed to be placed within the lightbox. Also, the Velo code should be written in the lightbox, not in the main page. Additionally, I think you’ll need to place some kind of button element inside the lightbox to trigger the code.

like this.

// Velo Code In LightBox

export function someCloseButtonElem_click(event) {

    let fadeOptions = {
        "duration": 3500
    }

    $w("#boxInLightbox1").hide("fade", fadeOptions).then(() => {
        wixWindow.lightbox.close();
    });

}

[user3250]

Hey! Im using the classix Wix Editor (not Wix studio) I hope it works the same for these kind of codes. I tried what you said but instead of animation, the lightbox remains open for 3500ms as the code says and then it closes itself, with no animation.

This is the code Im using, merging both of your codes. (sorry if you see something so wrong, Im a code beginner):

// Velo Code In LightBox
import wixWindow from 'wix-window';
let fadeOptions = {
        "duration": 3500
    }

    $w("#box1").hide("fade",fadeOptions).then(()=>{
        wixWindow.lightbox.close();
    });
export function someCloseButtonElem_click(event) {

    let fadeOptions = {
        "duration": 3500
    }

    $w("#window").hide("fade", fadeOptions).then(() => {
        wixWindow.lightbox.close();
    });

}

I also attach a screenshot of my lightbox so you can see what Im doing:

The purple button on top is what open the lightbox. #window is the id of the lightbox and #box is the id of the blue box inside the lightbox that I need to fade out.

[DeanAyalon]

You are trying to hide the box before the lightbox even finishes loading

Put the line hiding #box within the oddly-named someCloseButtonElem_click function, and disable the line hiding #window

[user3250]

Still nothing happens
I deleted all the wix animations, set the background transparent and only left the lightbox with a simple box to check the code with the simplest elements, but still not working.

// Velo Code In LightBox
import wixWindow from 'wix-window';
export function someCloseButtonElem_click(event) {

    let fadeOptions = {
        "duration": 3500
    }

    $w("#box1").hide("fade",fadeOptions).then(()=>{
        wixWindow.lightbox.close();
    });

}

I dont know why it works for you but not for me when I think Im doing the same feels so frustrating haha

[DeanAyalon]

This is odd, the code is right

I have tried setting up a fading lightbox myself, used this as my code:

import wixWindow from 'wix-window-frontend'

$w('#close').onClick(() => $w('#lightbox').hide('fade', { duration: 3500 })
                                .then(wixWindow.lightbox.close))

Simply worked, could you try using a different browser? Maybe the problem is not actually is how you’re building it?

For the sake of testing, I will try setting this up in the old editor as well, though from my experience it should work the same

[user3250]

Okay so I found the solution!!! The key is to deactivate the default close button of the lightbox. Instead, placing a new button, making it the close one (in the code) and voila! it works now.
The final code Im using closes the lightbox, so you dont have to hide every element inside it.

import wixWindow from 'wix-window';

$w.onReady(function () {
    $w("#closebutton").onClick(() => {
        $w("#lightbox5").hide("fade", { "duration": 2000 })
            .then(() => {
                wixWindow.lightbox.close();
            });
    });
});

Its so simple but I didnt know about the behaviour of that kind of button in wix

[onemoretime]

That’s right. It seems to have worked, but I apologize for not conveying my intention clearly. I had a feeling that you were using the default close button that comes with the lightbox… The “#someCloseButtonElem” in the code I initially wrote corresponds to the “#closebutton” in your code. Anyway, I’m glad it worked well. It’s great to hear that your concerns about the lightbox have been resolved.