Splash Screen Animated Transition

Important Links

https://mattermost.atlassian.net/browse/MM-33146

Figma Design File

Figma Prototype

Loader animation (Lottie)

Background

For the initial release of v2, a new app icon and splash screen is proposed.

Design

Splash Screen

The splash screen displays when the app loads up from a cold start.

Splash Screen Transition to Server Screen

For a user who doesn’t have a server with an active session, the app transitions from the Splash screen to the Add Server Screen.

 

Splash Screen Transition to Home Screen

For a user who have an active session on a server, the app transitions to the ‘Home Screen’.

 

Animation using Lottie

The Logo animation is done using Lottie - a tool that enables powerful animations for web, ios and android.

https://lottiefiles.com/share/foczlskz