Splash screen

Go to Splash screen in starti.app Manager

What is a splash screen?

The splash screen is what users see for the brief moment while your app starts up and loads content. On this page you decide how it looks.

How the app starts (preview)

At the top of the page there's a preview called How the app starts. Press play, or drag the timeline, to see the whole startup as the user experiences it — built from your own colors and images. Use it to check that everything looks right as you make changes.

Choose a splash type

Under Splash type you choose what is shown while the app loads the website. There are three types, and they are mutually exclusive — only the selected type is built into the app.

Icon + spinner

The classic one. The icon lifts and a spinner appears beneath it. You can set the spinner color to match your app's design.

Icon + Lottie

A Lottie animation replaces the icon and plays while waiting. Upload your animation (a Lottie .json file) if you want a more lively startup.

Two settings decide how it plays:

• Repeat the animation — the animation runs on a loop for as long as the app is starting, so it doubles as a loading indicator. Leave it off for animations that build your logo and are meant to end on it.
• Fill the screen — see below.

Fill the screen

Instead of sitting at the size of your app icon, the animation can cover the whole screen. Turn on Fill the screen and the animation is scaled up until it covers the display, exactly like the fullscreen image does — and like that image, it is cropped to fit, so keep anything important near the middle.

When it fills the screen, you also get the progress bar and status texts described under Fullscreen image, because there is no longer a spinner to show that the app is working.

Making an animation that fills the screen

Pass these on to whoever creates the animation. They are not preferences — an animation that ignores them will look wrong on the phone.

• Portrait, around 1320 × 2868 px. That is roughly the tallest phone the app runs on.
• The first frame must be the background only, with no logo or mark on it. The phone's own start screen is generated from that first frame, so whatever the animation opens on is what the phone shows before the app can draw anything. If the first frame contains your logo, users see the logo appear, then jump.
• No effects layers. The app plays Lottie animations with a player that ignores After Effects effects entirely — glow, blur, drop shadows and the like simply disappear. A glow has to be built as a real gradient shape instead.
• It should end where it starts if you turn on Repeat the animation, otherwise the loop visibly jumps each time it restarts.
• Keep the file under 2 MB. Manager rejects anything larger.

Alternative animations

Under Alternative animations you can add extra animations on top of the one above, and give each of them a name. Your website chooses between them by name — your developer calls startiapp.App.setSplashVariant("name") — so the app can open differently for, say, someone who is signed in than for a first-time visitor. Passing null goes back to the animation above.

A few things are worth knowing before you add one:

• The animation above is still the default. Every first launch, and everyone your website has not chosen for, gets it.
• The choice applies from the next launch. The app has already drawn its splash by the time your website can say which one it wanted, so a new choice is what the user sees the next time they open the app.
• The name is not a label. It is what your website passes in, so pick it together with whoever builds the site: lowercase letters, numbers and hyphens, starting with a letter. Renaming it later means the site has to pass the new name.
• The phone's own start screen always comes from the default animation's first frame. It is drawn before the app knows which variant is about to play, so an alternative animation should open on the same background as the default one — otherwise users see a jump.
• A new animation needs a new version of the app. The animations are built into the app, so starti.app has to publish an update before your users can be shown one.

Fullscreen image

Your own image covers the whole screen, with a slow zoom and a progress bar. When you choose this type, you can set up the following:

• Fullscreen image — upload a portrait image (PNG or JPG), at least 1320 × 2868 px (ratio approx. 9:19.5). The image is cropped to cover the whole screen, so keep important elements away from the edges.
• Slow zoom — the image zooms in very slowly, so the screen is never completely static.
• Progress bar — a thin line at the bottom that follows the app's actual startup. You can choose its color.
• Status texts — short texts shown only if the startup takes a while (e.g. "Loading content…"). The texts are automatically translated into the languages your brand is set up for, and the app picks based on the device language. Leave the fields empty to show no text at all.
• Text appearance — you can adjust the text's color, position, and the strength of the background behind the text, so it stays easy to read on top of the image.

Icon and background

Before your splash screen can be drawn at all, the phone shows a start screen of its own. You do not control it directly — the phone draws it from what was built into the app — but under Icon and background you decide what it is built from:

• By default, the splash screen uses your app icon. Read how to add your app icon here.
• If you'd rather show a different image, tick Use separate splash screen icon and upload an image (PNG or SVG).
• For a fullscreen image, you can also choose a background color close to the edges of the image, so the hand-off from the phone's start screen is smooth.

When your animation fills the screen

Here you don't have to set anything up. The phone's start screen is generated from the animation's own first frame when you upload it, so the two match by construction — the animation continues from the picture the phone has already drawn, with no icon and no jump.

See also