New app user tour

onboarding.page.html

<ion-content color="primary" >

    <div class="overlay" id="overlay">
      <ng-container *ngIf="pos===1">
        <h1 style="color: #fff;">Energy</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur ad ex illum provident natus beatae nemo quidem aut qui ipsam.</p>
        
      </ng-container>
      <ng-container *ngIf="pos===2">
        <h1 style="color: #fff;">Strength</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur ad ex illum provident natus beatae nemo quidem aut qui ipsam.</p>
        
      </ng-container>
     
      <span class="skip" *ngIf="pos !==0">Skip</span>
    </div>
<div style="display: flex; justify-content: space-around; margin-top: 30px; " class="ion-padding">

<div [id]="'wrap'+item" class="wrap" *ngFor="let item of [1,2]">  
  <ion-chip color="secondary" mode="ios" outline="true" (click)="switch(item)" >
    <ion-avatar>
      <img src="assets/logo/mtn.png" />
    </ion-avatar>
    <ion-label>MTN</ion-label>
  </ion-chip>
</div>
</div>

 
 </ion-content>

onboarding.page.scss

.overlay{
    height: 0;
    width: 100%;
    background-color: rgb(34 37 74 / 79%);
    position: absolute;
    z-index: 1;
    transition: all 500ms ease-out 0ms;
    margin: auto;
    display: flex;
    border-radius: 50% 50% 0 0;
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > p{
        width: 85%;
        font-size: 15px;
    }
}
.wrap{
    width: fit-content;
    padding: 30px 10px;
    border-radius: 50%;
}
.skip{
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: fit-content;
    font-size: 20px;
}
#wrap1{
    z-index: 2;
    background: var(--ion-color-primary);
}
#wrap2{
    background: var(--ion-color-primary);
}

onboarding.page.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-onboarding',
  templateUrl: './onboarding.page.html',
  styleUrls: ['./onboarding.page.scss'],
})
export class OnboardingPage implements OnInit {
pos = 0

  constructor() { }

  ngOnInit() {
      document.getElementById('overlay').style.height='100%'
      document.getElementById('overlay').style.borderRadius='0';
      this.pos=1
    
  }
  switch(i){
    if(i == 1){
    document.getElementById('overlay').style.height='0'
    document.getElementById('overlay').style.borderRadius='50% 50% 0 0';
    document.getElementById(`wrap${i}`).style.zIndex='0';
    this.pos=0

    const transition = document.querySelector('.overlay');

    transition.addEventListener('transitionend', () => {
      document.getElementById(`wrap${i+1}`).style.zIndex='2';
      document.getElementById('overlay').style.height='100%'
      // document.getElementById('overlay').style.transform='scale(1)';
      document.getElementById('overlay').style.borderRadius='0';
      this.pos=2
    });
  }
  }

}