angular 2 play css animation when div/component is in viewport

Question

I am building a landing page with angular and in my third div from top I have some animations. First div occupies 100vh viewspace, another say 50 and then I have following div (all these divs represent individual components):

<div id="about" class="app-about-us-div-container">

    <div class="onboarding-flow mdl-grid">
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-1">
            <i class="onboarding-icon material-icons">local_phone</i>
            </div>
            <div class="onboarding-text">
                <p>Tell us your problem domain and we will customize our solution to meet your specific needs</p>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-2">
                <i class="onboarding-icon material-icons">group</i>
            </div>
            <div class="onboarding-text">
                <p>Engage your project stakeholders, end users without any time hassle to build together a clear product vision</p>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-3">
                <i class="onboarding-icon material-icons">trending_up</i>
            </div>
            <div class="onboarding-text">
                <p>Benefit from our analytics to understand your users and their vision for the product. Build Personas to take best design decisions and streamline important product features </p>
            </div>
        </div>
    </div>

</div>

It's css:

.app-about-us-div-container{
    position: relative;
    height: 70vh;
    text-align: center;
    background-color: #ECEFF1;
}

.app-about-us-div-container h4{
    margin-top: 0%;
    padding-top: 20px;
}

.onboarding-flow {
    align-content: center;
    padding-top: 2%;
}

.circle {
    display: inline-block;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    background: transparent;
    text-align: center;
    border: 3px solid #cccccc;
    animation-name: pop;
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    color: #cccccc;
}
.circle-1 {
    animation-delay: 1s;
}
.circle-2 {
    animation-delay: 2s;
}
.circle-3 {
    animation-delay: 3s;
}

.onboarding-icon {
    align-self: center;
    font-size: 65px;
    position: relative;
    top: calc(50% - 35px);
}

.onboarding-text {
    position: relative;
    padding-top: 2%;
    width: 60%;
    left: 20%;
}
.onboarding-text p {
    font-size: 17px;
}

@keyframes pop {
    0% {
        color: #F44336;
        transform: scale(1);
    }

    50% {
        color: #ffffff;
        border-color: #F44336;
        background-color: #F44336;
        transform: scale(1.2);
    }

    100% {
        color: #ffffff;
        border-color: #EF5350;
        background-color: #EF5350;
        transform: scale(1);
    }
}

Now the problem is animations are played on pageload and till the user reaches to this div it's over. How can I make sure that these animations are played when this div is in viewport or at the top of the screen (I am not sure what could be the best option as the div above occupies 50vh so at one point both of them are visible 50 50)? Is anular animation of any help in this case?

It's component:

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

I used ng-in-viewport to achieve something similar to this. Follow the instructions available on the plugin's GitHub page:

1. Install the plugin

    npm install --save ng-in-viewport intersection-observer

Note: intersection-observer is a polyfill used to support all major browsers

2. Usage Example

In your module:

import { InViewportModule } from 'ng-in-viewport';

import 'intersection-observer';

In your template:

<div in-viewport (inViewportAction)="action($event)" class="circle circle-1">
      <i class="onboarding-icon material-icons">local_phone</i>
</div>

In your component:

action(event : any) {
        //do something with the element
}

You could for example use Angular's Renderer to add a css class to the element:

import {Renderer2 } from '@angular/core';

...

constructor(private renderer: Renderer2) {}
action(event : any) {
    if(event.value){ //if element is in viewport
      this.renderer.addClass(event.target, "circle-1");
    }
}