Descripton
To get fade out effect just set {animateOut: 'fadeOut'}
Owl Carousel CSS has build-in only fade out tranisiton.
To get more fancy looking animations you have to create them yourself in CSS or use fantastic Animate.css library created by Daniel Eden http://daneden.github.io/animate.css/
Scroll down to see more demos and how to setup animations with Animate.css library.
Animate functions works only with one item and only in browsers that support perspective property.
//Javascript
$('.fadeOut').owlCarousel({
animateOut: 'fadeOut',
items:1,
loop:true,
nav:true,
margin:10,
smartSpeed:450
});
Custom transition - slideOutDown and flipInX
1
2
3
4
5
6
7
1. How to use custom animations
To use animate.css obviously you have to add css into your header:
<link rel="stylesheet" href="animate.css">
2. Options
Owl has two special options for animations:
- {animateOut:'className'} - always animate current item.
- {animateIn:'className'} - animate upcoming/next item
.owlCarousel({
animateOut:'classNameOut', // Use classes from Animate library
animateIn:'classNameIn' // Use classes from Animate library
})
3. How does it work?
Before animation starts three classes are added to each item:
- .animated - added on both In and Out item - ive included this class from Animate.css into Owl core CSS file.
- .owl-animated-out - only on Out item - use it to change z-index
- .owl-animated-in - only on In item - use it to change z-index
- .classNameOut - only on Out item - this is your custom animation class from options.
- .classNameIn - only on In item - this is your custom animation class from options.
// It only contains animation duration and fill-mode
// Feel free to change duration
.animated {
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
// .owl-animated-out - only for current item
// This is very important class. Use z-index if you want move Out item above In item
.owl-animated-out{
z-index: 1
}
// .owl-animated-in - only for upcoming item
// This is very important class. Use z-index if you want move In item above Out item
.owl-animated-in{
z-index: 0
}
// .fadeOut is coming from Animation.css and this is how it looks in owl.carousel.css:
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}