• Home
    • Pugpig Bolt
    • Bolt apps
    • App customisation

    Create a lottie splash screen

    Written by Benji Weiser

    Updated at January 31st, 2025

    • Pugpig Bolt

      • Pugpig Site

        • Pugpig Archive

          • Working with Pugpig

            • Pugpig Consulting

              Table of Contents

              Warning
              Delete

              Warning

              If you do not have a splash screen when submitting your app, the process involved in creating them will not be included in your build.

              This means you won't be able to add a splash screen via config, you will need an app update.

              If you do have a splash screen included when building, you can freely change, remove and re-add it with configs.

              This document explains how to create a static splash screen for a Bolt app, using our interstitial ad  capabilities.

              Before getting started, you'll need the following:

              1. Adobe After Effects
              2. The Bodymovin plugin installed
              3. The desired image
              4. The hex code for the splash screen background colour

              STEPS

              1. Create a new composition with the dimensions 350x790

              2. Add the image in this composition with your desired one, positioning it wherever you want within the frame, You'll want to leave at least a small amount of padding between your image and the edges of the frame

              3. The typical animation time of a Lottie screen is 3 seconds, this should prove sufficient in most cases. Should you want to change it, edit the "duration" field in Composition>Composition settings and the duration of the layer (which should be your only layer) in the animation window at the bottom

              4. Save your project

              5. Open the Bodymovin window from Window>Extensions>Bodymovin

              6. Tick the "selected" circle next to flatsplash and flatsplash only (this should already be ticked)

              7. Click the settings cog icon for flatsplash

              8. Check that the "Glyphs" item is ticked and that "include in json" under "Assets" is ticked (again, this should already be the case if using the attached template)

              9. Select your export destination by clicking the three dots to the right of the flatsplash line item

              10. Click render, and wait until it's complete

              11. Find the json you just exported from After Effects and send it to us

              If the render fails, please check AE > preferences > General > Scripting and expressions and then allow scripts to write files and access network



               

               



              splashscreen lottie

              Was this article helpful?

              Yes
              No
              Give feedback about this article

              Related Articles

              • Commercial banners
              • Bolt Commercial Features Overview
              • Creating and exporting Bolt splash screen
              pugpig logo white
              Navigation
              • Products
              • Customers
              • News
              • Podcast
              Contact
              • Contact us
              • LinkedIn
              • Twitter
              Technical Support
              • Status Page
              • Documentation
              • Customer Support
              Corporate
              • Company
              • Jobs
              • Privacy Policy

              © Kaldor Ltd. 2022

              Powered by Pugpig


              Knowledge Base Software powered by Helpjuice

              Expand