Angular + Animate.css in Angular 15+ in two easy steps

Animate.css is a nice, simple and quick to get started animation library for css. That means it can be used in any web application and all you need to do is to add the dependency and add some css classes to the elements you want animated.

Of course, you know this but you probably have some issues installing it in Angular and that is why you've ended up here.

Luckily, to get it working is super simple in angular.

Step 1: install the dependency

For npm: npm install animate.css --save

For yarn: yarn add animate.css

Step 2: add the necessary configuration

In the angular.json configuration file, under the styles settings, add the following:

"styles": [
    "node_modules/animate.css/animate.min.css",
    "projects/your-project/src/styles.scss" // could also be styles.css or similar
],

You also need to add the path to the stylePreprocessorOptions so that it looks something the like the following:

"stylePreprocessorOptions": {
    "includePaths": ["./node_modules/animate.css"]
}

Then, finally, in your global styles file configured in the styles.scss file (projects/your-project/src/styles.scss" for my project), you need to add the css import at the top of the file:

@import 'animate.min';

/* Rest of your global css */

Now animate should work if you add animate__animated animate__bounce to a element class like so:

<h1 class="animate__animated animate__bounce">An animated element</h1>

I hope this blog post helped you along.

Happy coding! ☺️