Lottie Library is one of the beautiful animation library made my engineers at Airbnb. Lottie Animations render as fast and support cross-platform.
You can create new animation using adobe after effects and render them to your app or web using Lottie, or you can use thousands of existing animations available on https://lottiefiles.com
So, one random day I found this library while working on one of the ionic app, and i thought of using it and the result was amazing. The app looks so good with the fast loading animation. Sidenote: I was using gif before 😛
Later, I thought why not use it as the splash screen instead of the boring static splash screen. So, I googled and say the doc mentioned on the ionic website. But the doc is incomplete and I got into a lot of troubles and error. After spending my hard time debugging and reading the actual Github doc, I finally get it working.
You can always clone the project from github@ https://github.com/prashant9912/Lottie-Ionic-SplashSceen
Install the packages
run
ionic cordova plugin add cordova-plugin-lottie-splashscreen
npm install @ionic-native/lottie-splash-screen
After running these 2 lines in the ionic home directory you need to run
npm install @ionic-native/lottie-splash-screen
ionic cordova plugin add cordova-plugin-androidx-adapter
This will make sure that you won’t get android.support.v4.os.ResultReceiver error while building.
For iOS user, you need to run
sudo gem install cocoapods
pod setup
Now add to /src/app/app.module.ts
import { LottieSplashScreen } from ‘@ionic-native/lottie-splash-screen/ngx’;
and providers too.
Next, we need to download our favorite animation from lottiefiles.com, inside yoursrc/assets folder.
Now open config.xml file and edit the file
<preference name=”SplashScreen” value=”screen” /> to <preference name=”SplashScreen” value=”none” />
Now to display the lottie splash screen add
<preference name=”LottieAnimationLocation” value=”www/assets/loading.json” />
<preference name=”LottieFullScreen” value=”true” />
<preference name=”LottieLoopAnimation” value=”true” />
Now we need to hide the splash screen as soon the app loads. so, we need to add this.lottieSplashScreen.hide() to app.component.ts
I’ve added setTimeout function with 4sec delay just to enjoy the beautifully animated splash screen.
And here is the end product
Reference Link From –
https://medium.com/@prashantg9912/how-to-add-beautiful-lottie-splashsceen-to-ionic-app-7fdbc00f6cea
