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

54 comments

  1. If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela

  2. If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela

  3. Definitely believe that which you stated. Yourfavourite justification seemed to be on the internet the simplestfactor to take note of. Babb Niel Berkie

  4. Hi there Dear, are you in fact visiting this web page daily, if so afrerward you will without doubt take fastidious knowledge. Magdaia Heall Myrwyn

  5. This post offers clear idea in support of the new people of blogging, that in fact how to do blogging and site-building. Bridie Kele Agathe

  6. I hope you all are having a great weekend. I added a new list. This one is smaller, but still useful. I think the next one will be bigger. Annmarie Eric Roybn

  7. I like this post, enjoyed this one thank you for posting. “He removes the greatest ornament of friendship, who takes away from it respect.” by Cicero. Ann-Marie Bay Weinreb

  8. Heya i am for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you helped me. Carleen Carmine Kahler

  9. Que nadie haga caso de este tipo de anuncios . Para invertir hay que asesorarse en la entidad bancaria que uno tenga de siempre, y me mejor aun de un asesor particular y conocido. Marni Rowen Xavler

Leave a Reply

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