Transitions & Animations

lightGallery Desktop offers a rich set of transition effects to customize your viewing experience. You can control the animation style, its speed, and its acceleration curve directly from the View menu.

Transition Modes

This setting (mode) determines the visual effect used when switching between slides. The default is lg-slide.

• lg-fade
• lg-slide
• lg-zoom-in
• lg-zoom-in-big
• lg-zoom-out
• lg-zoom-out-big
• lg-zoom-out-in
• lg-zoom-in-out
• lg-soft-zoom
• lg-scale-up
• lg-slide-circular
• lg-slide-circular-vertical
• lg-slide-vertical
• lg-slide-vertical-growth
• lg-slide-skew-only
• lg-slide-skew-only-rev
• lg-slide-skew-only-y
• lg-slide-skew-only-y-rev
• lg-slide-skew
• lg-slide-skew-rev
• lg-slide-skew-cross
• lg-slide-skew-cross-rev
• lg-slide-skew-ver
• lg-slide-skew-ver-rev
• lg-slide-skew-ver-cross
• lg-slide-skew-ver-cross-rev
• lg-lollipop
• lg-lollipop-rev
• lg-rotate
• lg-rotate-rev
• lg-tube

Easing Functions

This setting (cssEasing) controls the acceleration curve of the animations, making them feel more natural or stylized. The default is ease.

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• easeInQuad
• easeInCubic
• easeInQuart
• easeInQuint
• easeInSine
• easeInExpo
• easeInCirc
• easeInBack
• easeOutQuad
• easeOutCubic
• easeOutQuart
• easeOutQuint
• easeOutSine
• easeOutExpo
• easeOutCirc
• easeOutBack
• easeInOutQuad
• easeInOutCubic
• easeInOutQuart
• easeInOutQuint
• easeInOutSine
• easeInOutExpo
• easeInOutCirc
• easeInOutBack

Animation Speed

• Speed (speed): Sets the duration of the slide transition in milliseconds. (Default: 600)
• Hide Bars Delay (hideBarsDelay): The delay in milliseconds before the toolbar and controls automatically hide. (Default: 6000)