Transitions

Create beautiful image and video galleries with built in CSS transitions. You can change the type of transitions by passing the transition name via mode option. lightGallery uses Hardware-Accelerated CSS3 transitions for faster animation performance. You can easily create your own beautiful custom transitions by updating the CSS transform values.

Demo

Change transition :
HTML Structure 
<div id="custom-transition-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>
JavaScript 
lightGallery(document.getElementById('custom-transition-demo'), {
    mode: 'lg-fade',
});

Create custom transition

lightGallery comes with more than 30 transitions effects. If you need more, you can easily create your own custom transitions.

Let’s see how we can create custom transition effects. Before that we need to understand how transition works in lightGallery. Transitions happen based on 3 CSS class names. lg-prev-slide, lg-current and lg-next-slide When user tries to navigate a different slide, lightGallery

  • Removes all CSS transition effects from the slides.
  • Remove existing lg-prev-slide and lg-next-slide classes from the current slide.
  • Based on the direction, adds lg-next-slide or lg-prev-slide to the current slide and next slide to determine how the current slide should disappear and the next slide should appear. If direction is previous, lg-prev-slide is added to the current slide and lg-next-slide is added to the next slide. likewise If direction is next, lg-next-slide is added to the current slide and lg-prev-slide is added to the next slide.
  • 50 ms timer starts to give some time for the browser to perform transitions.
  • After 50 ms, remove lg-current class from the current slide.
  • Add lg-current class to the next slide.
  • Restore the CSS transitions.

Let’s create a custom zoom-in-out transition.

When user navigates to next slide, zoom in transition appears and when user navigates to the previous slide, zoom out transition appears.

.lg-zoom-in-out {
    .lg-item {
        // By default all slides should be hidden
        opacity: 0;
        will-change: transform, opacity;

        // For the zoom in transition, set scale3d to 2
        &.lg-prev-slide {
            transform: scale3d(2, 2, 2);
        }

        // For the zoom out transition, set scale3d to 0
        &.lg-next-slide {
            transform: scale3d(0, 0, 0);
        }

        // Reset opacity and transition
        &.lg-current {
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }

        // Add CSS transition for opacity and transform
        &.lg-prev-slide,
        &.lg-next-slide,
        &.lg-current {
            transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s
                    ease 0s;
        }
    }
}

Edit this page on GitHub

← Update Slides
Methods →