Change the direction of animation

Question

I am using wow.js with animate.js to show animation on mouse scroll.

I want to change the direction of animation on small device like on large screen it should animate from right and on small device it should animate from bottom.

Here is a snippet to show what I need.

new WOW().init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
  <section class="wow fadeInRight" >Section 1</section>
  <section class="wow fadeInUp"  data-wow-delay="1s">Section 1 on mobile</section>

Anzil khaN · Answer 1 · 2018-03-06T11:53:33.367

I think you don't have to use two content for this , just use one element and change animation class for mobile. You can reduce the content.

I just add a media query to change the the animation class from anime.min.css

You can change the Media Query Value(767px)

new WOW().init();

@media only screen and (max-width: 767px) {
  .anim-mob-up.fadeInRight {
    -webkit-animation-name: fadeInLeft !important;
    animation-name: fadeInLeft !important; 
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>


<section class="wow fadeInRight anim-mob-up">Section 1 Both Desk & Mobile</section>

score 0 · Answer 2 · answered Mar 06 '18 at 10:57

You may simply do this:

new WOW().init();

.desktop {
  display: block;
}

.mobile {
  display: none;
}

@media all and (max-width:767px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<section class="wow fadeInRight desktop">Section 1</section>
<section class="wow fadeInUp mobile">Section 1 on mobile</section>

score 0 · Answer 3 · answered Mar 06 '18 at 14:58

Remove class fadeInRight from your html.
Detect screen width using JS.
If it less or equal to 1024, add fadeInUp to element, otherwise add fadeInRight to element.

  const wow = document.querySelectorAll('.wow')
  const dir = window.innerWidth <= 1024 ? 'fadeInUp' : 'fadeInRight'
  Array.prototype.forEach.call(wow, el => el.classList.add(dir))

new WOW().init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
  <section class="wow" >Section 1</section>
  <section class="wow"  data-wow-delay="1s">Section 1 on mobile</section>

Change the direction of animation

3 Answers3