Demos

Transitions

View as Markdown Open in Claude Open in ChatGPT

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 CSS transitions for smooth animation. You can create your own beautiful custom transitions by updating the CSS transform values.

Demo

Change transition :
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz

HTML

<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>
    <!-- more items -->
</div>

JavaScript

lightGallery(document.getElementById('custom-transition-demo'), {
    mode: 'lg-fade',
});
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

// Every mode other than lg-slide and lg-fade needs this stylesheet.
import 'lightgallery/css/lg-transitions.css';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'.
<LightGallery mode="lg-fade">
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

// Every mode other than lg-slide and lg-fade needs this stylesheet.
import 'lightgallery/css/lg-transitions.css';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'. -->
    <LightGallery mode="lg-fade">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

// Every mode other than lg-slide and lg-fade needs
// 'lightgallery/css/lg-transitions.css' in your global styles.

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'. -->
        <lg-gallery mode="lg-fade">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}

Create custom transition

lightGallery comes with more than 30 transition 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