package.docs_src.templates.pages.demos.animate.hbs Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of owl.carousel Show documentation

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

The newest version!

---
title: Animate Demo
subTitle: Animate
nav: demos
description: Animate carousel
sort: 3

tags:
- demo
- plugin
---


	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12


{{#markdown }}
### Overview

To get fade out effect just set:

```
animateOut: 'fadeOut'
```

> `fadeOut` value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in Owl. Simply download [animate.css](https://daneden.github.io/animate.css/) library and you are ready to extend Owl with new fancy transitions.


### Important
Animate functions work only with one item and only in browsers that support perspective property.

### How to use additional animation from `animate.css` library

1. [Download animate.css](https://daneden.github.io/animate.css/)
2. Include animate.css into header.
3. Set `animateOut` and `animateIn` options with the style names you picked.

```
$('.custom1').owlCarousel({
	animateOut: 'slideOutDown',
	animateIn: 'flipInX',
	items:1,
	margin:30,
	stagePadding:30,
	smartSpeed:450
});
```
Example with slideOutDown and flipInX
{{/markdown }}


	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12


{{#markdown }}

### 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.


Part of owl.carousel.css:
```css
/* Feel free to change duration  */

.animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -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 style taken 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;
  }
}
```


{{/markdown }}