Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Splash Screen

Open in Framer to interactPreview this example

Create a splash screen that automatically transitions when the video ends.

Open in FramerPreview Example

Learn more about splash screens


What is a splash screen?


Splash screens are a common feature of many mobile apps, appearing immediately after the user opens the app, but before it is fully functional. Regardless of how quickly an app loads, there are always several short tasks to be carried out before users can interact with it. A splash screen serves to smooth over this delay.

Typically a splash screen consists of the app’s logo - often displayed as a short animation - and may also include the current version number, and occasionally even a progress bar. 

Although the primary purpose of a splash screen is to provide a smooth transition into the app while it’s booting up, there’s obviously a limit to how long users will be willing to wait. For this reason, it’s recommended that a splash screen animation lasts no longer than 2 or 3 seconds - no matter how impressive your intro video may be.


Why do splash screens matter?


Similar to the splash pages that appear when first landing on some websites, effectively a splash screen is a way of buying time while the full app loads. However, ideally it should go much further than than this, by also making a strong impact on users as they wait.

Simply put, first impressions count. A sleek, stylish, and seamless splash screen will raise expectations(and likely also perceptions) of your app among users. This will help to reinforce the image of your app as a high quality, well-designed, and supremely usable bit of software.

Get your splash screen right, and users will enjoy being greeted by it each time they load the app. Get it wrong, and they’ll see it as a waste of their precious time.


Designing the ideal splash screen: best practices

The following are some best practices to adhere to when putting together a splash screen. Follow these guidelines and half the battle is already won.


● Keep the duration to under 3 seconds.

● Reduce this to 1 second for apps that users are likely to open several times per day.

● When evaluating design ideas, go for simple and bold over complex and intricate.

● The same for animation; overly complicated sequences will only appear showy, and likely make users feel that their time isn’t valued.

● A strong background color or even a background image can be good options. However, if your splash screen features an animation, a basic solid or gradient background will likely work better, providing a clean canvas against which the action can take place.

● Ask a developer what’s the absolute minimum number of tasks an app must carry out on boot-up, and they’ll likely provide you with a list as long as your arm. Stay firm, and insist that this be reduced to only a handful of key tasks, with all the others taking place once the app is running.

● If you really want to produce a more complex intro sequence with flashy animation and special effects, keep this for only the first time that the user starts up the app, switching to a more simple version for all subsequent occasions.


How to make a splash screen in Framer

In Framer you can replicate a splash screen by using the out-of-the-box Video Default Component. Start by creating two screens using the Screen tool. The first screen is where your video will play, and the second will be the screen it transitions to. Next, insert the Video component from the Insert Menu. Place the Video component on the first screen and upload a video from your computer or link one from a URL.

With the Video component selected, set the controls to Autoplay: Yes, and Loop: No. Set the Interaction of the Video component to transition when the video ends, then set the Transition type to Magic Motion. Now your splash screen is ready to go!

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement