How to apply animations on two elements at once with animated.css

Question

I am working on a simple slideshow where each slide has its own duration. I would like to add transitions between the slides using animate.css by adding and removing classes on the current and the next slides. My problem is that - with my current approach - only the next slide will be animated (it slides in) but the current one is just disappear without any animation. I have tried to detect the end of the current animation and then change(adding/removing) the classes but in that case there was a huge gap between the slides...

How can make sure that two animations plays at once?`

var slides = $this.find('.slide');

slideIt = function(time) {
    setTimeout(function() {

        var duration = slides.eq(nextSlide).data('duration');

        slides.eq(currentSlide)
        .removeClass(animateIn)
        .addClass(animateOut)
        .hide();


        slides.eq(nextSlide)
        .removeClass(animateOut)
        .addClass(animateIn)
        .show();

        slideIt(duration);

        currentSlide = nextSlide; nextSlide ++;
        if (nextSlide == slidesLength) { nextSlide = 0;}

    },time);
};

Thank you for the help in advance!

Ps.: While typing this post I have realized that it must be the .hide() but without it only the first slide displayed.

Niklas E. · Accepted Answer · 2020-04-02T11:48:49.213

1

Native CSS animations on two different elements should always run at the same time. But if you hide an element, it disappears before the animation has even started. You have to add a timer for that.

    slides.eq(currentSlide)
    .removeClass(animateIn)
    .addClass(animateOut);
    // save the jQuery instance of the element that should be hidden.
    var $currentSlide = slides.eq(currentSlide);
    // hide this element later
    setTimeout(function() {
      $currentSlide.hide();
    }, 1000); // 1000 for 1000ms, replace that with the duration of the animateOut animation

edited Apr 02 '20 at 11:48

answered Apr 02 '20 at 09:57

Niklas E.

1,848
4
13
25

First of all thank you for your answer! This solution seems to be work at first but from second slide something goes wrong. I have put the script to jsfiddle if you'd like to see what happens. https://jsfiddle.net/RobbAdam/aecsLdjh/11/ – RobbAdam Apr 02 '20 at 11:42
I fixed it with https://jsfiddle.net/6rwhx814/ I will edit my answer to show you wat i've changed. – Niklas E. Apr 02 '20 at 11:46
The problem was, that the `currentSlide` variable changed and so the `slides.eq(currentSlide)` doesn't return the actual element anymore, that should be hidden if the timeout passed. I solved it by saving the right element in its own variable. I called it `$currentSlide` (because it's a jQuery instance) but you can name it something else. – Niklas E. Apr 02 '20 at 11:53
That was really quick! :O Thanks very much for the help, I understand your solution! I will go with this. Will try the other one as well! – RobbAdam Apr 02 '20 at 11:57
@RobbAdam The second answer might be better for your type of slider. CSS problems should be solved via CSS if it's possible, but both solutions are ok. And also... thanks for your well asked and structured question. 99% of the new users don't mind the the guidelines, just want their code fixed and don't want to understand the solution. I'll hope you stick around on SO. – Niklas E. Apr 02 '20 at 12:05

score 1 · Answer 2 · answered Apr 02 '20 at 10:11

If my first answer doesn't satisfy you, because you want so solve that on the CSS side, when there is a second way:

Remove the .hide() in JavaScript.
Make sure your CSS animation ends with a state, there the element cannot be seen anymore (like transform: scale(0) or left: -100%).
Maintain that final state of the CSS animation. To do that, see: Maintaining the final state at end of a CSS3 animation

How to apply animations on two elements at once with animated.css

2 Answers2