Transitions in fancyBox 3

Question

Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:

1. Open slide/gallery
2. Navigate between slides
3. Close slide/gallery

By default, fancyBox 3 uses different transitions for different types of content.

<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> <!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
  <p>This content does just fades in.</p>
</div>

Look at this codePen to see it in action, including the navigation transitions. For images we have:

1. Zoom in
2. Slide horizontally
3. Zoom out

For html content we have:

1. Fade in
2. Slide horizontally
3. Fade out

Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.

Answer 1

Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:

.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}

.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}

And also modify the speed of the jquery.fancybox.js lib to:

// Animation duration in ms
speed : 100

Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:

Answer 2

As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.