Animate.css not working angular


Topic: Animate.css not working angular

Maximilian Bieleke asked 1 months 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 1 months 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 1 months 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 1 months 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 1 months 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 1 months ago

Its working thank you!


Please insert min. 20 characters.
Status

Resolved

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