How to stop or delay flexslider animation using the before() callback?

Question

I'm adding a class .animate-out on all the elements of the slides before flexslider animates to the next slide, the issue is that the css animation applied won't show because flexslider moves to the next slide immediately.

I'm adding the class using flexslider's before() callback function which is called inside the function that animates the slider, so it's too late to use slider.pause() to pause the slider (using it will pause the next slide).

I already tested the animations using alert() inside the before() callback function which pauses the javascript execution and I can see the css animations added by .animate-out.

is there a way to stop the slider from animating (I will use slide.flexAnimate() later to animate manually) ? and if not is there a way to delay the slide ? Here's the code on Github.

Answer 1

Currently the only way to delay the animation to show the css animations is using .delay() on the current slide and the one we're animating to:

before: function(slider) {
        // TODO: check if the browser supports css animations before delaying the slides

        // delay slide fadeOut to show the css animations
        slider.slides.eq(slider.currentSlide).delay(1000);

        // delay slide fadeIn until the animations on the prev slide are over
        slider.slides.eq(slider.animatingTo).delay(1000);

}

To know why I used this code you can check the slider code for fade animation which is:

if (!touch) {
       slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
       slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
}

I'm using as my slider options:

animation: 'fade',
animationSpeed: 0;

I hope this helps someone.

Answer 2

There is another way to get the desired effect without the need to pause the slider. This also works with animation set to "slide".

For this example we assume the duration of each of the transitions is 500ms. Adept the paramters to your transition speed accordingly.

First we set a transition delay on the slides container (which is animated by flexslider via CSS3 as well):

.flexslider .slides {
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s
}

The trick is not to use the '.flex-active-slide' class provided by flexslider to build the transitions upon, but to use our own transition class by simply applying that class to the slide elements via flexsliders' callbacks:

start: function(slider) {
    slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
},
before: function(slider) {
    slider.slides.eq(slider.currentSlide).removeClass('flex-active-transition');
},
after: function(slider) {
    setTimeout(function() {
        slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
    }, 700);
}

This will add the transition class '.flex-active-transition' with a delay after the sliding has taken place AND the fade-out transitions have been animated and remove the class before the beginning of every slide. We can use this class for all our CSS3 transitions now.

Since sliding itself is already delayed by our CSS declaration, the slide-out transitions will now perform before the slider slides. We can set the timeout in the "after" callback to the duration of our fade-out + our slide speed, and the fade-in transitions triggered by the custom transition class will be performed just after the sliding has completed.

To get smoother animations, try shorten the setTimeout delay. This will blend sliding and slide transition animations, which may result in some nice slide effects.