Angular 10 Animation with WOWJS

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 Animation with WOWJS.

Angular WOW.JS

Post Working:
Friends, In this post, I am showing you WOW.js animation into my angular 10 application and also I am using bootstrap into my angular application for better looks.

Angular 10 came and if you are new then you must check below two links:

Here is the code snippet for Angular 10 Animation with WOWJS and please use carefully:

1. Firstly, we need to run below commands into our terminal to get fresh angular 10 setup and we should have latest node version installed into our system:

npm install -g @angular/cli

ng new angularwow

cd angularwow

ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. After done with above setup, new we need to run below commands into our project terminal to get wow.js and bootstrap modules into our angular 10 application. I am adding bootstrap for better looks but we can skip that also:

npm install --save wowjs

npm install --save ngx-wow

npm install bootstrap --save

//jquery for bootstrap
npm install jquery --save

3. Now we need to add below code into our project angular.json files to call the styles and scripts:

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/wowjs/css/libs/animate.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/wowjs/dist/wow.js"
            ]

4. Now we need to add below code into our src/app/app.module.ts file:

...
import { NgwWowModule } from 'ngx-wow';

imports: [
    ...
    NgwWowModule
  ],

5. Now we need to add below code into our src/app/app.component.ts file:

...
import { NgwWowService } from 'ngx-wow';

export class AppComponent {
...
  constructor(private wowService: NgwWowService) {
    this.wowService.init();
  }
}

6. Finally we need to add below code into our src/app/app.component.html file to get the final output on our browser:

<!--I have done same html working example like wow.js to show you exact working example-->

<div class="jumbotron text-center">
  <h1>Angular 10</h1>
</div>
<div class="container">
  <div class="row text-center" style="display: block;">
       <img class="wow fadeInDown" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg">    
  </div>
  <div class="container text-center circles">
    <div class="row">
      <div data-wow-delay="0.5s" class="wow rollIn" style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;">
        <p class="circle bg-green">such easy</p>
      </div>
      <div data-wow-delay="0.5s" class="wow bounceInDown center" style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"><img src="https://wowjs.uk/img/wow-1.gif" height="200" class="wow animated" style="visibility: visible;"></div>
      <div data-wow-delay="0.5s" class="wow lightSpeedIn" style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;">
        <p class="circle bg-yellow">very ES	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: visible; animation-name: rollIn;"><img src="https://wowjs.uk/img/wow-3.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow pulse" style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: pulse;">
        <p class="circle bg-blue">WOW		</p>
      </div>
      <div class="wow bounceInRight center" style="visibility: visible; animation-name: bounceInRight;"><img src="https://wowjs.uk/img/wow-12.gif" height="200"></div>
    </div>
    <div class="row">
      <div class="wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
        <p class="circle bg-red">no jquery</p>
      </div>
      <div class="wow flipInX center" style="visibility: visible; animation-name: flipInX;"><img src="https://wowjs.uk/img/wow-2.gif" height="200"></div>
      <div class="wow bounceInRight" style="visibility: visible; animation-name: bounceInRight;">
        <p class="circle bg-purple">many anims	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-5.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow shake" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-yellow">aint GPL</p>
      </div>
      <div data-wow-iteration="2" class="wow swing center" style="visibility: hidden; animation-iteration-count: 2; animation-name: none;">	<img src="https://wowjs.uk/img/wow-6.gif" height="200"></div>
    </div>
    <div class="row">
      <div class="wow rollIn" style="visibility: hidden; animation-name: none;">
        <p class="circle bg-purple">how small</p>
      </div>
      <div data-wow-delay="0.5s" class="wow bounceInUp center" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><img src="https://wowjs.uk/img/wow-10.gif" height="200"></div>
      <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="wow lightSpeedIn" style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;">
        <p class="circle bg-green">3 KiB only	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-7.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.25s" class="wow pulse" style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-blue">just scroll</p>
      </div>
      <div class="wow lightSpeedIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-9.gif" height="200"></div>
    </div>
    <div class="row">
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow bounce" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-yellow">reveal now</p>
      </div>
      <div class="wow bounceInUp center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-8.gif" height="200"></div>
      <div class="wow bounceInRight" style="visibility: hidden; animation-name: none;">
        <p class="circle bg-red">so impress</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-4.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow flip" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-green">WOW</p>
      </div>
      <div class="wow bounceInRight center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-11.gif" height="200"></div>
    </div>
    <div class="row">
      <div data-wow-delay="0.5s" class="wow rollIn" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;">
        <p class="circle bg-red">no jquery?!</p>
      </div>
      <div data-wow-delay="1s" class="wow bounceInDown center" style="visibility: hidden; animation-delay: 1s; animation-name: none;"><img src="https://wowjs.uk/img/grumpy.gif" height="200"></div>
      <div data-wow-delay="1.5s" class="wow bounceInRight" style="visibility: hidden; animation-delay: 1.5s; animation-name: none;">
        <p class="circle bg-purple">that sucks!	</p>
      </div>
    </div>
  </div>
</div>
<style>
  .circle {
    margin: 25px 10px;
    width: 200px;
    color: #fff;
    font-size: 32px;
    line-height: 200px;
    text-align: center;
    height: 200px;
    border-radius: 100px;
}
.bg-green {
    background: #5bd5a0;
}
.bg-yellow {
    background: #ffcc35;
}
.bg-blue {
    background: #1daee9;
}
.bg-red {
    background: #eb3980;
}
.bg-purple {
    background: #c843a5;
}
.row{display:inline-flex;}
</style>

This is it friends and don’t forget to run ng serve command into your terminal to check the final working. If you have any kind of query then please do comment below.

This post is just for to add wowjs into our angular application and we can add more animations into our angular application by following to wowjs animations tricks according our requirements.

Jassa

Thanks