This document explains all the steps necessary to use Lottie Animations as a native splash screen in your OutSystems mobile applications.
This plugin has no dependencies. However, if you need to build your application for iOS, you will have to install the Swift Support plugin from Forge and reference it in your mobile application.
You might opt to include the lottie animation as a resource in your application, or to reference it by using an URL. In case you decide to include it, you need to upload the resource.
In the Data tab, right click on Resources and upload your animation file
Name it as you desire
In Deploy Action, select Deploy to Target Directory
Write a name for the target directory (optional)
There are some parameters that need to be added to the Cordova config.xml file. We can do this by adding extensibility configurations.
In the Interface tab, click on the application name
Scroll down till the bottom
Double click on Extensibility Configurations
Copy and paste the following JSON file into the extensibility configurations:
{
"preferences": {
"global": [
"name": "AutoHideSplashScreen",
"value": "true"
},
"name": "ShowSplashScreen",
"value": "false"
"name": "SplashScreenDelay",
"value": "30"
"name": "LottieRemoteEnabled",
"name": "LottieLoopAnimation",
"name": "LottieAnimationLocationLight",
"value": "www/lottie/banking-debit-card-splash.json"
"name": "LottieAnimationLocationDark",
"name": "LottieAnimationLocation",
"name": "GradlePluginKotlinEnabled",
"name": "GradlePluginKotlinVersion",
"value": "1.7.22"
"name": "AndroidXEnabled",
"name": "LottieEnableHardwareAcceleration",
"name": "LottieFullScreen",
"name": "LottieHideAfterAnimationEnd",
"name": "LottieCacheDisabled",
"name": "LottieBackgroundColor",
"value": "FFFFFF"
}
],
"ios": [
"name": "UseSwiftLanguageVersion",
"value": "5.5"
]
These are the ones you might want to modify:
Boolean. It allows you to select if the animation is located in your project or in an external location. Bear in mind that enabling it will require providing an URL.
Boolean. It allows you to loop the animation. You will need to stop the animation at a certain point. You can do that by using the actions explained in the next section.
String. It receives the path for the animation that will be displayed. For local animations, the path needs to be provided with this format:
www/{resource_folder}/{resource_name}
In the case of the example resource in the section above, the path would be like this: www/lottie/banking-debit-card-splash.json
For remote animations, you need to provide the full URL.
There are two optional configurations that allow you to define an animation for the light and dark theme: LottieAnimationLocationLight and LottieAnimationLocationDark.
String. It allows you to define a background color for your animation. You need to provide the hex code for such a color.
String. As mentioned previously, this plugin has no dependencies, but you will have to add Swift support to your mobile application if you need to build it for iOS. In that case, you must add the Swift language version configuration as shown in the example above.
This plugin provides two actions that can be utilized at any moment in your application. Have in mind that such actions can be affected by the extensibility configurations shown above. For instance, if you enabled the parameter LottieLoopAnimation, the action ShowSplashScreen will loop the animation indefinitely.
It receives the folder and the file name for the lottie animation. It returns the path to be used in the ShowSplashScreen action.
It receives the location for the lottie animation and a boolean value to indicate if it is a remote file or not.
It hides the splash screen. Note that this can be combined with the different OutSystems screen events. For instance, we could make the initial splash screen loop until a certain screen is ready, calling this action in the OnReady event of the screen.
This plugin is based on the cordova-plugin-lottie-splashscreen Cordova plugin stored at this location. Please refer to it for more information about all its possible configurations and functionality.