Hello Universe Hello Universe - 4 months ago 26
CSS Question

How to ensure that when previous next buttons clicked on a Flexslider animation restarts?

I have question about css3/js.

I am using FlexSlider and trying to build an animation as can be seen from this jsFiddle

https://jsfiddle.net/v7zvzkp1/

Now, what I am trying to do is that there is an animation with slide..
* Text bounceInFromLeft, and then text bounceOutLeft (to exit)
* Next Slide appears as well as the "bounceInLeft and then bounceOutLeft" animation starts

I want the same to happen for click of the slider previous/next button. However, when I click the prev/next buttons, the animation does not restart. Rather continues...

I am confused as to what I am doing wrong. Can any kind sould point out and let me know what/how I can solve this.

My sample html is as following

<div class="flexslider left">
<ul class="slides">
<li>
<img src="https://coronalabs.com/wp-content/uploads/2013/04/Dilbert_page_img2.png" >
<div class="meta">
<h1>Test header</h1>
<div class="category">
<p>READ MORE 1</p>
</div>
<div class="btn btn-slide btn-animation">MORE </div>
</div>
</li>
<li>
<img src="https://www.walldevil.com/wallpapers/w04/thumb/116610-calvin-and-hobbes-calvin-amp-hobbes-comic-strip.jpg" >
<div class="meta">
<h1>Test header 2</h1>
<div class="category">
<p>READ MORE 1</p>
</div>
<div class="btn btn-slide btn-animation">MORE </div>
</div>
</li>
<li>
<img src="https://i.ytimg.com/vi/XHwMzZqRGZ8/maxresdefault.jpg">
<div class="meta">
<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<div class="category">
<p>READ MORE 2</p>
</div>
<div class="btn btn-slide btn-animation">MORE2 </div>
</div>
</li>
</ul>




And the corresponding style is at follows

img {
width: 300px;
max-height: 200px;
}
.flex-direction-nav {
display: inline-block;
margin-bottom: 20px;
width: 100%;
}


.meta h1,
.meta p {
animation: bounceInLeft 6500ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
opacity: 0;
}

@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
30% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
55% {
opacity: 1;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(20px, 0, 0);
}
65% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}


Ofcourse I am calling the flexslider through jQUery

$('.flexslider').flexslider({
animation: "fade",
controlNav: false
});

Answer

thanks for your question

I came up with a relatively simple solution.

In short - all you have to do is use the "currently active slide" class and apply the animation to it - not to every p or h1 element out there.

Take a look at your reworked fiddle and click around the next/prev buttons.

.slides .toAnimate{
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
}
.flex-active-slide .toAnimate {
  animation: bounceInLeft 6500ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  opacity: 0;
}

Also, please notice the starting transform on p and h1 elements (with added toAnimate class, for simpler and more readable CSS code). They have to be set in the starting position or you'll see a FOUT.

One more thing: Keep your animation-iteration-count equal to 1.

Hope this helps :)