Gallery open animation

[kowalczyk-mateusz]

Hello, is it possible to change gallery open animation? right now, the animation looks like: opacity: 0 -> opacity: 1. And I would like to also add a scale animation to open, from 0.9 to 1 together with opacity animation. I tried to change container in render method, but it broke styles for images etc

[igordanchenko]

Hi there!

Hello, is it possible to change gallery open animation?

Have you tried adjusting fade animation settings? You can adjust fade animation duration and the timing function.

https://yet-another-react-lightbox.com/documentation

And I would like to also add a scale animation to open, from 0.9 to 1 together with opacity animation.

Is this the effect you are trying to achieve?

.yarl__portal {
  transform: scale(0.9);
  transition: transform 0.25s ease;
}

.yarl__portal_open {
  transform: scale(1);
}

[kowalczyk-mateusz]

Thanks for the answer, but this is not exactly what I want. I want a different animation for the backdrop, and a different one for the slider. Backdrop should animate from opacity 0 to 1, and slider should scale up from 0.9 to 1. I think this is impossible :(

[igordanchenko]

The fade-in effect applies to the whole lightbox, so there is no way to transition opacity just for the backdrop.

You can scale slide independently, though the implementation isn't trivial - please see the below sandbox.

https://stackblitz.com/edit/yet-another-react-lightbox-240?file=src%2FApp.tsx

[kowalczyk-mateusz]

@igordanchenko, I have one more question regarding animation. I'm using a custom render method for buttonClose where I implemented the same function as in the close prop. However, I'm encountering an issue: when I click outside of the image, a proper animation is triggered, but when I click on my custom button, there's no animation. The LightBox component just disappears without any transition effect. This issue does not occur when I remove my closeButton. Could you help me find a solution to ensure the animation is also applied when using my custom closeButton?

[igordanchenko]

Are you trying to customize the Close button icon? Custom iconClose render prop would be more appropriate in this case.

However, if you need to render a custom Close button, you can close the lightbox with a transition effect by calling the close method on the Controller ref.

[kowalczyk-mateusz]

@igordanchenko thank you so much, :) works perfect now