CSS3 Animations.

1

2

3

4

5

6

7

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;
  }
}
	

Custom transition - bounceOut and bounceIn

1

2

3

4

5

6

7

Custom transition - bounceOutDown and bounceInDown

1

2

3

4

5

6

7