Animate.css not working angular

Topic: Animate.css not working angular

Maximilian Bieleke asked 2 years ago

Expected behavior Fade in animations when scrolling down the page

Actual behavior No animations

I followed the installation instructions from the documentation Installed animate.css added the path to the angular.json and added the script tags in the index.html file

<app-root /app-root>
<script src="" </script>
new WOW().init();

unfortinatly it is still not working. Even the example with the infinite bounce from the docs is not working for me.

Resources (screenshots, code snippets etc.)

I tried it in a row like that:

<div class="row wow fadeIn">

And like that:

<hr class="hr-light mt-4 wow fadeIn" data-wow-delay="0.4s">

Grzegorz Bujański staff answered 2 years ago

Hi. I understand that these elements have set height, width and some background color? Please check if styles are loaded in devtools for this item. Should be visible e.g. {
    visibility: visible;
    animation-delay: 0.4s;
    animation-name: fadeIn;

Maximilian Bieleke commented 2 years ago

When I look at the hr example in the inspector, visibility and animation-delay are correct, but the "" is missing "animation-name: fadIn" somehow...

Grzegorz Bujański staff commented 2 years ago

Unfortunately I am unable to reproduce this error. Are you able to provide me with a minimal repository where this problem will occur? I'll check what's going on

Grzegorz Bujański staff commented 2 years ago

It looks like the css class names have changed in the new animate.css. That's why it doesn't work. Please uninstall animate.css and install again using npm install animate.css@3.7.2 command

Maximilian Bieleke commented 2 years ago

Its working thank you!

Vladimir Econom commented 2 years ago

Hello, I've faced similar problems and find out that animate.css classes have changed their names. It's pretty easy to fix - you just need to add animate__ before any animate class and everything starts working.

Since animate.css has made major 4+ release - maybe the better approach will be to update the MDB docs instead of staying on the older 3rd version.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: Computer
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No