Topic: Animate.css not working angular
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">
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 4 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 4 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 4 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 4 years ago
Its working thank you!
Vladimir Econom commented 4 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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