Animate a carousel 2! With animate.css

Last time we tried to animate the inners of a boostrap carousel. Now the thing is, try and catch the left and right aspect. Here we can have some fun for like .6seconds!

The goal is to animate the carousel in and out, just like bootstrap but with some more flair. I dont want to think about the animations so for now we just use Animate.css for those! Next is to check the classes used in the carousel. When i was searchin i found a .carousel-item-left and a .carousel-item-right class that are put on the elements when them move to the left, or to the right.

Note that if we go to the right we only have -right class. The in and the out is added using the .active class. If an element has both it goes out. And only a -left or a -right it is the incoming element.

Zoom example

So this is what it will look like using the zoomInRight and zoomInLeft animations from Animate.css.

How does it work

Reset the default animation.

Add left and right animation names.

Also reset the transform from the default transition.

.carousel-animation .carousel-item {
    transform: none;
}

.carousel-animation .carousel-item-left {
    animation-name: animationInRightName;
    animation-duration: .65s;
}

.carousel-animation .carousel-item-left.active {
    transform: translate(0, 0);
    animation-name: animationOutLeftName;
}

.carousel-animation .carousel-item-right {
    animation-name: animationInLeftName;
    animation-duration: .65s;
}

.carousel-animation .carousel-item-right.active {
    transform: translate(0, 0);
    animation-name: animationOutRightName;
}

Bounce example

Here we add the bounceInRight and bounceInLeft animations from Animate.css.

Putting it all together

So this is the final css used in above examples.

Now you can try and go and have fun with it.

Enjoy!

.carousel-zoom .carousel-item {
    transform: none;
}

.carousel-zoom .carousel-item-left {
    animation-name: zoomInRight;
    animation-duration: .65s;
}

.carousel-zoom .carousel-item-left.active {
    transform: translate(0, 0);
    animation-name: zoomOutLeft;
}

.carousel-zoom .carousel-item-right {
    animation-name: zoomInLeft;
    animation-duration: .65s;
}

.carousel-zoom .carousel-item-right.active {
    transform: translate(0, 0);
    animation-name: zoomOutRight;
}

.carousel-bounce .carousel-item {
    transform: none;
}

.carousel-bounce .carousel-item-left {
    animation-name: bounceInRight;
    animation-duration: .65s;
}

.carousel-bounce .carousel-item-left.active {
    transform: translate(0, 0);
    animation-name: bounceOutLeft;
}

.carousel-bounce .carousel-item-right {
    animation-name: bounceInLeft;
    animation-duration: .65s;
}

.carousel-bounce .carousel-item-right.active {
    transform: translate(0, 0);
    animation-name: bounceOutRight;
}

And done.

And we are done here. Next you can add more animations on the items using the active class. As exampled on the first Animate a carousel! example to make it more awesome!