Ng-lottie as Splash screen and setRoot to homePage after that

I’m trying to run animation(lottie animation) as a Splash screen and when splash screen finish I’m trying to setRoot to HomePage.
Need help.


  templateUrl: 'app.html',
  selector: 'lottie-animation-view-demo-app',
  template: ` <lottie-animation-view
            <div id="player">
              <p>Speed: x{{animationSpeed}}</p>
              <div class="range-container">
                <input #range type="range" value="1" min="0" max="3" step="0.5"
              <button (click)="stop()">stop</button>
              <button (click)="pause()">pause</button>
              <button (click)="play()">play</button>

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public navCtrl: NavController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

    this.lottieConfig = {
      path: 'assets/octiver-earth.json',
      autoplay: true,
      loop: true

    setTimeout(() => {
      // this.anim.destroy();
      // this.navCtrl.push(HomePage);
    }, 5000);

  handleAnimation(anim: any) {
    this.anim = anim;

  stop() {

  play() {;

  pause() {

  setSpeed(speed: number) {
    this.animationSpeed = speed;

With what exactly?

You won’t be able to really replace the splash screen as this is before your app has control of the app. But you of course can display something after the native screen is hidden.

Like I wanted to open page when animation get ended.
I achieved it by placing

<ion-nav [root]="rootPage"></ion-nav>

at the end of template after div closing.

By the way Thank you Sujan12 for asking

For a Hybrid Mobile App (and not a PWA) see:

help me, I have the same problem.