bxslider text effects animate.css

Question

I'm currently setting up a slider for my website and I ran into some problems.

I use bxslider and I wanted to add animations for the text in each slide by adding animate.css. Animate.css is pretty simple: just add "animated" and the animation name as classes to the animated element.

Basically, I want text to appear on a slide with an animation after the slider finished the transition to the slide. I also want the text to fade out before the transition to the next slide with the next text.

Since the slider has callback-functions I thought it would be straightforward to just add the necessary CSS-classes through.

JQUERY

$(document).ready(function(){

    $(".bxslider").bxSlider({
        auto: true,
        startSlide: 0,
        slideWidth: 640,
        onSlideAfter: function(){
        $(".title").addClass("animated bounceInRight");
        $(".text").addClass("animated bounceInRight");
        },
        onSlideBefore: function(){
        $(".title").removeClass("animated bounceInRight");
        $(".text").removeClass("animated bounceInRight");
        }
  });
});

HTML

<ul class="bxslider">
  <li><img src="" />
<h1 class="title animated bounceInRight">TITLE 1</h1><p class="text animated bounceInRight">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 2</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 3</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 4</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
</ul>

CSS 1 (what I added to the slider's default CSS)

.bxslider {
    padding: 0;
    margin: 0;
    list-style: none;
}
.title {
    position: absolute;
    top:100px;
    left: 100px;
    color: #FFF;
    font-family: Helvetica;
}
.text {
    display: block;
    position: absolute;
    top:200px;
    left: 200px;
    color: #000;
    font-family: Helvetica;
    width: 300px;
    background: #FFF;
    -webkit-animation-delay: 1s; /* to delay text "entrance" */

}

CSS 2 (animation "trigger"... the different animations are just CSS3 animations with keyframes and so on)

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

I put an example slider online: bxslider test.

There are several problems so far. I will always refer to "text", but I mean both the <h1> and the <p> tags.

First: The first slide is animated correctly, the text appears with animations. On the second slide, the text is already visible and then the animation starts. I want the text to appear "through" the animation.

Second: I tried adding the fadeOut-effect (again by adding and removing the corresponding CSS-classes). It won't work, the fadeOut will happen after the transition to the next slide. I guess I make some fundamental mistake with adding and removing the classes, but I can't figure it out.

Third: Could I use different entrance-effects on each slide, maybe even randomly?

Fourth: There seems to be a bug in Safari. On my computer (Safari & Chrome) the slideshow starts with the first slide. On the webserver in Safari, the last slide is visible first and then it srolls through the first slide directly to the second slide... very strange. In Chrome the slideshow looks normal. There are no problems with the code according to Safari's log

It would be really nice if someone could help me out with this, at least for the first two problem.

Thank you!

Answer 1

How to do it:

HTML:

<section class="slider">  
    <ul class="bxslider" >
        <li><img src="foto-1.jpg"/>
            <div class="one slider-text">your text</div>
        </li>
        <li><img src="foto-2.jpg"/>
        <div class="slider-text">your text 2</div>
        </li>       
        <li><img src="foto-3.jpg"/>
        <div class="slider-text">your text3 </div>
        </li>                    
    </ul>
</section>

CSS:

.slider .slider-text {
    font-size: 250%;
    color: #fff;
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 20%;
    width: 100%;  
}
.slider-text {
    visibility:hidden;
}
.slider-text.active-slide {
    visibility: visible;
}

JQUERY:

$('.bxslider').bxSlider({
    auto: true,
    preloadImages: 'all',
    mode: 'horizontal',
    captions: false,
    controls: false,
    pause: 5000,
    speed: 800,
    onSliderLoad: function () {
        $('.bxslider>li .slider-text').eq(1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");
    },
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-slide').removeClass('active-slide');
        $('.bxslider>li .slider-text').eq(currentSlideHtmlObject + 1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");

    },
    onSlideBefore: function () {
        $(".slider-text.active-slide").removeClass("wow animated bounceInRight");
        $(".one.slider-text.active-slide").removeAttr('style');

    }
});

I use:
BxSlider v4.1.2
jQuery v1.11.2
Latest Animate.css

You may use to:
wow.js

Answer 2

Simply you can use wow js and add classes normaly then reinitialise wow each time

$(document).ready(function(){
new WOW().init();
$('.bxslider').bxSlider({
auto: true,
adaptiveHeight: true,
onSlideAfter: function () {
new WOW().init();
},
onSlideBefore: function () {

new WOW().init();
}


});

});