Shopify Question posted in
The Shopify help center can be found here.

How to add wow.js/animate.css on Shopify?

I am in the process of creating a Shopify store and would like to go a little beyond what the themes are offering. Specifically I am triyng to add wow.js and animate.css.

As you can see below, I have added the CDN for Animate.css in the head tag of template.liquid.

enter image description here

Next I added the CND for Wow.js and activated is as such:

enter image description here

It seems to be loading the scripts just fine, even adds the animated class as one scrolls to the element, but for some reason none of the aniamtion is taking place.

enter image description here

Any input into alleviating this issue is much appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well this was utterly annoying. Anyhow the way to refernce/activate Animation.css animations now seems to be with class animate__animated and NOT just animated like it used to be.

    This means that when one is initialising wow.js one must change that animationClass to animate__animated as such:

    new WOW({
  animateClass: 'animate__animated', // --> WOW default is animated but that does not work anymore
  }).init();

    And the Animation.css animations must be as such:

    <div class="wow animate__fadeInUp">Lorem</div>


  2. 0

    It might be that your theme’s CSS is overriding animate.min.css since it’s being loaded before it. Try loading animate.min.css last, just before the closing </head> tag

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search