Animate.css does not seem to work with Laravel 7.10.3 in Chrome and FF

Question

I am trying to use Animate.css in my Laravel project. I installed Animate.css using the following command:

npm install animate.css --save

I included it in \resources\sass\app.scss file:

@import "~animate.css/animate.css";

Then I ran the following npm command to compile it into app.css:

npm run dev

When I look into the page source in the browser, animate.css seems to be included but the HTML elements are not animated. Animation seems to be working in Edge but not in Chrome (v81.0.4044.138) or FF (v76.0).

Answer 1

You might have either forgot the JavaScript or didn't configure things correctly. First, install animate.css.

npm i animate.css --save

In bootstrap.js, add 'animate.css'.

window.Popper = require('@popperjs/core').default;
window.$ = window.jQuery = require('jquery');
window.animate = require('animate.css');

In app.scss:

@import "~animate.css/animate";

Create a production-ready build.

npm run prod

Then make sure you are using the correct files.

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>