Transitions between slides / Animate on arrow right/left click ?

[benbonnet]

Read though the doc, not an option ? That'd make it 200% perfect to make it possible to animate right/left, or maybe fading the images, when the arrows are clicks

[benbonnet]

@dimsemenov think it is somehow possible ?

[dimsemenov]

Transition between items is removed on purpose. Reasons:

1. On slow machines transitions do not look smooth, especially if large images are used and during the loading of images.
2. As progressive loading of images is enabled, it causes Paint each time some part loads. If animation will start before some image is fully loaded, there will be lags. Again, especially if images are big (1200px+).
3. Transition (especially "move") distracts from the content. Most native image viewers don't use any transition. As well as web photo-giants, like 500px, Flickr or Imgur.

In summary, there are no plans to add "move" transition between slides. "fade" - likely will be implemeneted, but currently there are more important features in todo list.

So you'll need to implement it by yourself, for example look in https://github.com/dimsemenov/PhotoSwipe/blob/master/src/js/down-move-up-handlers.js#L1002 (function _finishSwipeMainScrollGesture). Feel free to submit PR, if it'll be light, I'll accept it.

[benbonnet]

Thanks a ot for your answer, I'll dig into it Very clean work btw

[petercarsater]

I just took a quick look at it. When images are changed, the .pswp__container is using translate3d to change the position.

So, correct me if i wrong, a solution would be to add:

.pswp__container { transition: transform 0.35s ease-in-out; }

If you use modernizr you could add (to make sure of support on devices with no touch)

.csstransforms3d.no-touch .pswp__container { ... }

Since it's already using GPU you should have no repaints, and a nice smooth transition between images? Since i haven't test it, i'm not sure about the lag mention above (progressive loading)...

[benbonnet]

What about the growing image animation provided in the demos ? Not that easy to integrate.

As we're not photo-giants yet, you'd get the same fancy appeal with those transitions options, out of the box for everyone

[csborgman]

As a pro photographer for over 20 yrs having a smooth transition between images is really needed. I have to look at things in the eyes of an art buyer, they are looking at hundreds of images each day and the better they UX is the more images they will want to look at.

Comparing a website with photography as the main or only content on a page to giant websites like 500px, Flickr or Imgur is not accurate. Those sites are loading tons of information on each click, my website only goes to the next image, a big big difference.

I am very happy and thankful you've chosen to take over PS, it's never really worked well on Android till now. The comments I have are a suggestion from a pro shooter who like to build website, not as a coder. I can say with 100% confidence adding a slide animation would take it to the next level (only for those using it on desktop, mbl is perfect as is). If slide is not possible then a dissolve into the next image, or the least impressive but still better than no transition is a fade in/out.

Same goes for Magnific Popup, needs a smoother UX for pro or serious enthusiast photographers.

[Larzans]

I do get that it can be a performance problem on some slow machines, but what is the problem with adding an option to use transitions? (which apparently already existed before but was removed : https://github.com/dimsemenov/PhotoSwipe/issues/519#issuecomment-70091664

btw, the link mentioned above does not work anymore, any idea where to find an example on how to best implement this feature with photoswipe?

[mjau-mjau]

+1

A transition option would add a level of satisfaction to the UI for capable desktops (90% +). Just because FB/Flickr/500px don't use animations (for many reasons), doesn't mean it has no functional benefit when added with tasteful easing and interval. Just like photoswipe uses animations for image-zoom and swipe, slide transitions can compliment the UI by visually connecting two states for non-touch devices also.

It would require a truly ancient device to not be able to perform a translateX transition effectively for a single image. As for the issue with progressive images, perhaps one could use a flag to only allow transition if image==loaded?

This seems like a missing ingredient in an otherwise tasty cake. I will probably take a look into a "fix" myself as soon as I find the time, unless it somehow gets added in the meantime.

[Larzans]

I am lost, does anybody know how to implement this with photoswipe? Any help would be appreciated...

[benbonnet]

@larzans this discussion asks about it

[Larzans]

This here is just about the OPTION to do it, what i meant was how to implement it myself without modifying the library itself... I actually found another comment here (https://github.com/dimsemenov/PhotoSwipe/issues/487) which says he got it to work for one image, will try it now...

[benbonnet]

is it surely not impossible to do it yourself @dimsemenov you'll make twice the moneyfor the wordpress plugin on themeforrest with a transition ! Or is it in the paid version ?

[dimsemenov]

I already explained in the first message why there won't be "move" transition and when "fade" transition will be implemented, please re-read it.

There are a plenty of sliders that allow fancy transitions, PhotoSwipe is not one of them. It's not that easy to animate two 1600px wide images, as some people think in this discussion.

[benbonnet]

Let's close this issue then !

[dimsemenov]

@bbnnt, issue will be closed when fade transition will be implemented.

[benbonnet]

:+1:

[csborgman]

Royal Slider seems to do a very good job at doing a "move" slide transition with 1600px wide images. Maybe the PS4 author should talk to the Royal Slider author and ask how he did it??? ;) LOL

The reason there will never be a move transition in PS or Magnific Popup is because Royal Slider is a premium plugin with these features and the author would rather you buy RS than request a feature for a free plugin. He's a very talented coder and a good businessman. I just wish, especially here on github, he would be honest about his business plans and say "why would I add features to a free plugin that would possible cause me to lose Royal Slider sales?" How could anyone argue with that logic?

My suggestion or hope, would be he builds a premium version of PS4 ( a WP plugin!) that adds both fade and move transitions and the UI is biased towards the desktop, but of course still work on mobile; it is still the best mobile option. Maybe a hybrid of Magnific Popup, PS4 and Royal Slider (without thumbnails options).

If PS4 was like PS3 and really just a mobile option this discussion would not exist. I'm happy this is not the case and we are having this discussion. :)

[dimsemenov]

@csborgman,

Royal Slider seems to do a very good job at doing a "move" slide transition with 1600px wide images.

It doesn't. And RS doesn't force progressive loading and stretched thumbnail, which is a huge factor.

The reason there will never be a move transition in PS or Magnific Popup is because Royal Slider is a premium plugin with these features and the author would rather you buy RS than request a feature for a free plugin.

It's a stupid assumption. These are different scripts for a different purpose. And I never had a goal to skip some feature just to make other script sell better.

My suggestion or hope, would be he builds a premium version of PS4 ( a WP plugin!) that adds both fade and move transitions and the UI is biased towards the desktop,

WP plugin will be free, at least most part.

Please keep the discussion constructive.

[benbonnet]

RS is completely bloated with options. keep it simple, it will be way better like this.

[csborgman]

@dimsemenov Of course RS moves/slides 1600px images, why would you say it doesn't? It may not for you but it works fine on the site I'm testing with 1600-1800 x 1200-1300px images at fullscreen on 27" 2009 iMac.

I'm not a coder, just a professional photographer for over 20 years. If I say it works, it really does. I wouldn't lie... Give RS more love man!

[Larzans]

Did anybody manage to get it to work with whichever js trick applied to photoswipe? I am not talking about an option but about dirty hacking, finding some way to do it...

[Larzans]

If anybody is wondering how to get this working with the current version of photoswipe, check out my SE post here: StackOverflow

[mjau-mjau]

Without debating implementation of this feature, I am sure @dimsemenov has reasons, I would like to explore some technical aspects. Today I poked around a bit, and the simple solution with CSS, although not without flaws, is as @petercarsater suggested: .pswp__container_move { transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

Apart from performance factors, I can only see a few issues with this implementation:

1. loop seam If looping is enabled, the animation will "jerk" at the seam between the last slide and the first slide as translateX position is reset. Not a catastrophe of course, but looks unprofessional. One solution is to disable looping. However, I see that when swiping, the translateX position never gets reset ... It only resets when using non-swipe navigation. Not resetting the translateX would solve this factor, and I am not 100% sure why reset is applied for non-swipe but not for swipe.

2. transition breaks swipe The transition CSS interferes with swipe/drag functionality. The simple solution would be to disable PS swipe feature on desktop/mouse/no-touch, and only add the transition css class on desktop/mouse/no-touch with css media query or JS. An even better solution would be to temporarily remove the transition class on mousedown/startdrag, and reapply on mouseup or afterChange.

3. Zoom state If image is zoomed, transition will be a bit ugly since the image first jumps to original zoom before transition. I think this is an acceptable imperfection.

I will probably have a go at it tomorrow, but any thoughts are welcome.

[mjau-mjau]

PhotoSwipe Slide Transitions So, I added slide transitions to Photoswipe, and it's working nicely without disturbing native behavior. http://codepen.io/mjau-mjau/full/XbqBbp/ http://codepen.io/mjau-mjau/pen/XbqBbp

The only limitation is that transition will not be applied between seams in loop mode (for example when looping from last slide to slide 1). In examples I have used jQuery.

Essentially, it works by simply adding a CSS transition class to the .pswp__container on demand, but we need to add some javascript events to prevent the transition from interfering with Swipe, and only if mouseUsed. We also add a patch so the transition does not get added between loop seams.

1. Add the below to your CSS It will be applied on-demand from javascript when required.

.pswp__container_transition {
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

2. Add javascript events to assist in assigning the transition class This can go anywhere, but must be triggered after jQuery is loaded.

var mouseUsed = false;
$('body').on('mousedown', '.pswp__scroll-wrap', function(event) {
  // On mousedown, temporarily remove the transition class in preparation for swipe.
  $(this).children('.pswp__container_transition').removeClass('pswp__container_transition');
}).on('mousedown', '.pswp__button--arrow--left, .pswp__button--arrow--right', function(event) {
  // Exlude navigation arrows from the above event.
  event.stopPropagation();
}).on('mousemove.detect', function(event) {
  // Detect mouseUsed before as early as possible to feed PhotoSwipe
  mouseUsed = true;
  $('body').off('mousemove.detect');
});

3. Add beforeChange listener to re-assign transition class on photoswipe init The below needs to be added in your PhotoSwipe init logic.

// Create your photoswipe gallery element as usual
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// Transition Manager function (triggers only on mouseUsed)
function transitionManager() {

  // Create var to store slide index
  var currentSlide = options.index;

  // Listen for photoswipe change event to re-apply transition class
  gallery.listen('beforeChange', function() {

    // Only apply transition class if difference between last and next slide is < 2
    // If difference > 1, it means we are at the loop seam.
    var transition = Math.abs(gallery.getCurrentIndex()-currentSlide) < 2;

    // Apply transition class depending on above
    $('.pswp__container').toggleClass('pswp__container_transition', transition);

    // Update currentSlide
    currentSlide = gallery.getCurrentIndex();
  });
}

// Only apply transition manager functionality if mouse
if(mouseUsed) {
  transitionManager();
} else {
  gallery.listen('mouseUsed', function(){
    mouseUsed = true;
    transitionManager();
  });
}

// init your gallery per usual
gallery.init();

[Larzans]

If you have problems with your implementation please check the solution i mentioned in my post above on StackOverflow: http://stackoverflow.com/questions/28214038/photoswipe-4-0-initiate-swipe-to-next-programatically/28320098#28320098 I found no problems looping or any other problem for that matter.

[Graham-Openshaw]

I'm a total JS newbie so this is largely over my head and I'm struggling with where to place the code above but I also have a couple of potentially stupid questions: a) in photoswipe.js line 525 there is a class added (somewhere.....) called pswp--has_mouse. If this literally means what it says could the transition be added to this class or at least by the same event logic? b) it seems that the only time this transition is an issue is when the button--arrow--left/right buttons are used. Could those events be used to trigger the class add from photoswipe-ui-default.js line 461/466?

I tried the straight CSS solution someone suggested but it makes drag events horribly sluggish.

Thanks!

UPDATE: The code above (mjau-mjau) works fine - thanks a lot, it makes the otherwise awesome plugin usable for me.

No need to answer the above questions unless you are bored enough to want to help educate me....

[Graham-Openshaw]

Further update: mm code seems to cause horrible hesitation in IOS Safari so back to vanilla implementation. May try Larzans when I understand it.

[mjau-mjau]

@Graham-Openshaw thats because 'mouseUsed' code is outdated in my example from almost a year ago. 'Mousemove' will in fact trigger on iOS now (although not continuously), so this causes crash of swipe and transition, thus creating a sluggish motion. You need to use a more advanced detection method. I have an updated version. You can see it works fine here, also on iOS Safari: https://demo.flamepix.com/galleries/nature/

[Graham-Openshaw]

Thanks! That makes sense. Extracting the revised code from the demo is a bit beyond my very limited capability and I have SO much to learn.... If you ever put the updated version in a codepen or similar please let me know.

[mjau-mjau]

Actually, if you just remove my native mouseUsed detection, it should work. The native mouse detection in Photoswipe is almost identical to my new code, and checks that mousemove triggers multiple times within 100ms, thus to be sure it's not a pseudo mobile event. The only reason I am using separate mouse detection in the first place, is because photoswipe doesn't start detecting mousemove until after it gets triggered. This could mean that transitions don't fire on first slide, or until visitor moves mouse again ...

Try this. Same scripts as posted earlier, but remove the commented stuff:

var mouseUsed = false;
$('body').on('mousedown', '.pswp__scroll-wrap', function(event) {
  // On mousedown, temporarily remove the transition class in preparation for swipe.
  $(this).children('.pswp__container_transition').removeClass('pswp__container_transition');
}).on('mousedown', '.pswp__button--arrow--left, .pswp__button--arrow--right', function(event) {
  // Exlude navigation arrows from the above event.
  event.stopPropagation();
})/* Don't use below any more, because it may detect 'mouse' on mobile devices
.on('mousemove.detect', function(event) {
  // Detect mouseUsed before as early as possible to feed PhotoSwipe
  mouseUsed = true;
  $('body').off('mousemove.detect');
});*/

// downgrade to ONLY use the photoswipe listen event for mouse movement
/*if(mouseUsed) {
  transitionManager();
} else {*/
  gallery.listen('mouseUsed', function(){
    mouseUsed = true;
    transitionManager();
  });
//}