Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

How to Make an Animated Ionic Splash Page with HTML & CSS

By Gary simon - Mar 09, 2017

I wanted to create an animated splash page for my Ionic 2 app. Upon a quick Google search, I found that this was largely impossible, with exception to this hack. Unfortunately, this hack was only relevant to Ionic/Angular 1 apps. 

Using the same basic HTML and CSS tips from that article, I easily adapted the code to work with Ionic 2. In fact, the process is much more simple with fewer lines of code.

If you prefer watching a video tutorial..

I've recorded a full video tutorial regarding the process of creating an animated Ionic splash page. Be sure to subscribe to the channel for updates when I release new tuts!

Starting the Project

I'm going to make the assumption that if you're interested in creating a splash page, then you already have the Ionic CLI (Command Line Interface) installed. If not, and you're brand new, please watch our free ionic 2 course here.

Open up your console and let's start a quick project:

> ionic start ionic-splasher tabs --v2

You don't have to use the tabs starter template, you could use blank or anything else. I'm choosing to use it because it's prepopulated with pages, which will allow us to demonstrate that the splash page does not load every time the particular page is visited. We only want it to load once the app loads, right? Right!

After it's done installing:

> cd ionic-splasher
> ionic serve -l

Once you run ionic serve -l, it will load up the project in your browser. Notice the default page that loads is the Home page:

The Splash HTML

Navigate to the default page that loads when your app launches. In our case, this is located in: /src/pages/home.html 

At the top of home.html just above <ion-header> paste in:

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
  <div class="flb">
    <div class="Aligner-item Aligner-item--top"></div>
    <img src="assets/logo.svg">
    <div class="Aligner-item Aligner-item--bottom"></div>
  </div>
</div>

The #custom-overlay div will cover the entire screen. We're using style binding set to a CSS display property. If the splash property is true, it will set it to flex, if not, it will set it to none .

The .flb class and everything inside of it is optional.

The Splash CSS

Within the home.scss file, paste in:

#custom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width:100%;
  background-color: #002a3e;
}

.flb {
  background-color: #3ebffb;
  height:100%;
  width:100%;
  animation: pulse 1s linear forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  max-width: 50%;
}
.Aligner-item--top {
  align-self: flex-start;
}
.Aligner-item--bottom {
  align-self: flex-end;
}
#custom-overlay img {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  animation: animation 3100ms linear infinite both;
  animation-delay: 1s;
}

The key ingredient here is #custom-overlay. The associated CSS ruleset makes it cover the current page. Anything else within it is up to you and the needs of your splash page.

The rest of the CSS rulesets simply center and vertical align an SVG logo.

Optional Animation

If you want to apply CSS animations, such as fading in our .flb class, add to the bottom of the CSS we just pasted:

@keyframes pulse {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

If you viewed the demo and noticed the complex animation sequence applied to the logo, there's a lot of code! Fortunately, I didn't code it by hand. Instead, I visited Bounce.js. This allows you to select a preset animation on the left dropdown, preview it, and click export CSS .

This will open up a large text area that allows you to copy the @keyframes animation that makes that given animation sequence possible.

So, you can do that if you wish. For now, I'm not going to paste that large amount of CSS here in this tutorial.

Making it all work

The following code will vary slightly if you're using a tab-based Ionic 2 layout. I will make notes of what you need or don't need based on whether or not you're using a tab layout.

Open up the home.ts file and paste the following if you're not using tabs:

export class HomePage {
  
  splash = true;
  secondPage = SecondPagePage;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
    setTimeout(() => this.splash = false, 4000);
  }

}

If you're using tabs as in the case of this tutorial, open home.ts and paste in the following:

export class HomePage {
  tabBarElement: any;
  splash = true;

  constructor(public navCtrl: NavController) {
    this.tabBarElement = document.querySelector('.tabbar');
  }

  ionViewDidLoad() {
    this.tabBarElement.style.display = 'none';
    setTimeout(() => {
      this.splash = false;
      this.tabBarElement.style.display = 'flex';
    }, 4000);
  }


}

There's a little bit of extra work required if you're using tabs, because the splash page will not cover the bottom tab bar. The above code hides the tab bar upon the app loading, and then shows it within the setTimeout() function.

The same thing is happening in both scenarios with the splash overlay itself. The splash property is set to true by default, and then in 4 seconds (4000 ms), it's set to false.

Removing the Default Splash Screen

The Ionic-CLI enables a default splash screen that loads when an app is launched. We don't need that anymore.

So, open up /config.xml and paste in the following preferences:

<preference name="SplashScreenDelay" value="0"/>
<preference name="ShowSplashScreen" value="false"/>

 

Final Thoughts

You will need to time the setTimeout delay appropriately based on the animation that's occurring in your CSS. Now, you don't necessarily need to animate your splash page. You could do any number of things, now that you have the possibility of utilizing HTML and CSS for your ionic splash page.

You could even embed a full-screen video if you wish!

 


Share this post




Say something about this awesome post!