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

<body>
<app-root /app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" </script>
<script>
new WOW().init();
</script>
</body>

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.

element.style {
    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 "element.style" 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.

FREE CONSULTATION

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

Status

Answered

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