Product
Tutorial
This tutorial will guide you how to add enter and exit animations for lightbox popups created with Wonder Lightbox plugin.
Enter Animation Effect
To add an enter animation effect to the lightbox popup, add data-enteranimation to specify the effect, use data-enteranimationduration to specify the animation duration.
The supported enter animation effects are fadeIn, fadeInDown, zoomIn, bounceIn.
Exit Animation Effect
To add an exit animation effect to the lightbox popup, add data-exitanimation to specify the effect, use data-exitanimationduration to specify the animation duration.
The supported exit animation effects include fadeOut, fadeOutDown.
Online Demos
Enter effect fadeInDown, duration 500ms, exit effect fadeOutDown, exit duration 1s:
<a href="https://www.youtube.com/embed/c9-gOVGjHvQ" class="wplightbox" title="WordPress Carousel Plugin" data-enteranimation="fadeInDown" data-enteranimationduration="500ms" data-exitanimation="fadeOutDown" data-exitanimationduration="1s">YouTube Lightbox</a>
Enter effect zoomIn, duration 1s, exit effect fadeOut, exit duration 1s:
<a href="https://player.vimeo.com/video/147149584" class="wplightbox" title="WordPress Slider Plugin" data-enteranimation="zoomIn" data-enteranimationduration="1s" data-exitanimation="fadeOut" data-exitanimationduration="1s">Vimeo Video Lightbox</a>
Enter effect bounceIn, duration 1s, exit effect fadeOut, exit duration 1s:
<a href="https://fast.wistia.net/embed/iframe/xva0e2zrim" class="wplightbox" title="WordPress Carousel Plugin" data-enteranimation="bounceIn" data-enteranimationduration="1s" data-exitanimation="fadeOut" data-exitanimationduration="1s">Wistia Video Lightbox</a>
