Ionic 5 Development

Integrate Animation Splash Screen in Ionic 5 (Lottie Splash Screen)

Posted by
We guide you step by step how to integrate animated splash screen with ionic 5 mobile app

Indexing of development :

  • Setup and install the ionic framework
  • Create an ionic 5 application and platform setup
  • Integrate Lottie-splash screen with ionic app
  • Run and test the project

Required tools :

  • Node JS
  • Angular 8
  • Ionic 5
  • Cordova
  • Terminal or Command Line
  • IDE or Text Editor (We are using Visual Studio Code)

Let’s start the development

Before going move-forward and according to the principal steps, we believe that you have already to install NodeJS. If not, kindly download it using the link: NodeJS

Step 1: Setup and install the ionic framework

$ sudo npm install -g ionic
$ sudo ionic -v

You need to install the ionic framework, to full-fill the requirement to create an ionic project.

Ionic Installation
Install the ionic framework and check the version

Step:2 Integrate ion-slides with ionic app

Integrate ion-slides with ionic app

Step 3 : Create an ionic 5 application and platform setup

Now it times to set up the new ionic 5 application, please use the below command and run it to your terminal or command prompt.

$ ionic start Lottie_Splash_Screen_Ionic5 blank --type=angular

  ? Integrate your new app with Capacitor to target native iOS and Android? No

If see the above question … Choose No. It will integrate the Capacitor instead of Cordova as Native accessibility

Now it’s time to move in to your app folder

$ cd ./Lottie_Splash_Screen_Ionic5
Lottie_Splash_Screen_Ionic 5

Run your app using below ionic command

$ ionic cordova run android

Make sure you choose cordova during the selecting intermediate framework like capacitor/cordova.

Setup 4 : Select a Lottie files from lottiefiles.com

Open the URL -> Select any Lotties animation

– Open Lotties File -> Select the HTML tag as describes

– Select the your LOTTIE JSON URL -> Open the URL in another tab

– Copy the whole JSON file -> Make new folder -> In to src/assets/lottiesplash

– make new file lottie.json -> Paste whole the JSON file in to the lottie.json

That’s it …. It’s done….

You can run your app via below command for respective platform.

$ ionic cordova add android
$ ionic cordova add ios
$ ionic cordova run android
$ ionic cordova run ios

You can download the project at github link:

We did it!

Thanks,

Yogesh Patil

Leave a Reply

Your email address will not be published. Required fields are marked *