Cool Text Animations in Angular Apps with Anime.js
Creating Text Animations using Anime.js
Yes, of course, Angular provides us with a handy way of creating animations in your Angular applications. But, this article is for those who are lazy to code but need simple but cool looking text animations that satisfy the requirements and make the website attractive.
First of all, I will quickly explain how to enable animations in anime.js in your Angular application and then go through some different text animations that you can use quickly.
Importing anime.js to the App
- In your Angular app, go to the index.html file and paste the following CDN script inside the content of<head> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>2. Next, you have to declare the anime function in the component which you hope to create the text animation in. I here use the app.component in my demo, so I do the declaration in the app.component.ts file.
3. Meanwhile, you must implement the AfterViewInit lifecycle hook and override the ngAfterViewInit(): void {} method in which we are going to write the animating code.
Next, some codes for different cool text animations are given below. What you should pay attention to is that the text part that we need the animation with is provided with a custom class and that custom class name must be used in the corresponding code lines within the ngAfterViewInit method in the ts file.
I have provided a demo for the first animation.
Animation 01
In this demo, you must go through the HTML file, CSS file, and ts file.
In the HTML file, the text element has a custom class named an-1.
This class name is used in the ngAfterViewInit() method.
<h3 class=”an-1">I am looking great.</h3>
You can provide custom CSS properties for this .an-1 in CSS file as you wish.
Animation 02
Animation 03
Animation 04
Animation 05
Animation 06
Animation 07
Animation 08
Animation 09
Animation 10
Animation 11
Animation 12
I guess these text animations will be useful for you. In addition to these text animations, you can create many animations with other elements with the help of anime.js. So, please do not forget to have a look at the anime.js documentation for more.
