Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use the React version of Fullscreen Lightbox.

Animations

Pro feature

There are two animation props: "initialAnimation"—triggered after each source's load, and "slideChangeAnimation"—triggered after a slide change (but not after a slide change through swiping). Their values ought to be CSS classes. Both props can't contain the same CSS class simultaneously (the animations won't work properly).

An example:
CSS:

.example-initial-animation {
animation: initial-animation 2s ease;
}

@keyframes initial-animation {
0% {
transform: rotate(0deg);
}

50% {
transform: rotate(360deg);
}

100% {
transform: rotate(0deg);
}
}
JavaScript:
<FsLightbox
initialAnimation="example-initial-animation"
/>

Look over the Fullscreen Lightbox open source plug-ins.