Angular 2 Animate.css Tutorial – How to use Animate.CSS in NG2 Application?

This Article will serve as a guide to implementing Animate.css animations with Angular 2 animation system. Animate.css is a popular and handy library for simple CSS Animations. We’ll apply the animation to a component and control it via a button. We will not use ngClass but convert the Animate.css to fit Angular 2 Animate.

Final Result:

Git Commits as Diff:

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5

Github Repository 
Final Result

Full Tutorial:

First of all, lets start a new project. We will use Angular Cli for that.

Step 1: Add Component and Markup:

Create a new component as the target of our animation:

Now include the component in your app.component.html

And add a button responsible for the animation triggering

Now go ahead and create the triggerAnimation method in your app component. We also need a method to reset our trigger when the animation is done.

Since Animations are state based in Angular 2 we need a variable that holds the current state as a string. Since we will implement the Wobble Animation from Animate.css we call our state the wobbleState.

Step 2: Add some Styles to our Application:

Step 3: Chose a Animation and prepare it to fit Angular 2 Syntax 

We will go with the wobble animation from Animate.css. It is keyframe based and can simply be converted to a Angular 2 Animation. Here is the original CSS Code taken from Animate.css:

We will only need the Keyframes and we can remove the -webkit prefixes. Just keep it somewhere for now. We will make use of it in Step 4. Plain Animation looks like this:

Now add the animation to the component annotation in our app.component.ts. Make sure to copy all imports.

Step 4: Translate the animation and add Keyframes

Now we can ‘translate’ the animation to fit Angulars needs. You can see that the keyframes have a percentage value that describes the current state of the animation. In Angular this will be called the offset. Instead of using percentage value use values between 0 and 1. Add the keyframes like this:

Step 5: Finalize Animation Trigger

We need to use ngZone in order to tell the view that our value is updated. Thats it. You can apply this probably to all animations from Animate.css. Show us your results in the comments. If you have any issues, the code diffs on GitHub could be helpful to you.