Bolt supports an animated splash screen - typically a logo or simple image that appears whenever the app is launched. The animation is created in Adobe After Effects and exported using the Bodymovin plugin.

Before You Start

You'll need:

• Adobe After Effects
• The Bodymovin plugin (and zxp installer if installing from aescripts.com)
• Your desired image or animation asset
• The hex code for your splash screen background colour

Composition Dimensions

Choose your composition size based on the type of animation:

• Logo/image centred on screen - use 300x300px (square)
• Full screen animation or image - use 350x790px (portrait)

A background colour is applied in both cases.

Setup

1. In After Effects, go to Preferences > Scripting & Expressions and enable "Allow scripts to write files and access network"
2. Create a new composition using the appropriate dimensions above
3. Add your image or animation, positioning it as desired - leave a small amount of padding from the edges of the frame
4. The standard animation duration is 3 seconds. To change this, edit the Duration field in Composition > Composition Settings, and update the layer duration in the animation timeline accordingly
5. Save your project

Working with MP4 Files

If your source is an MP4/video file:

1. Export the MP4 as a PNG sequence first (tutorial here)
2. Reimport the PNG sequence into your After Effects composition at the correct resolution and dimensions (steps here)

Exporting with Bodymovin

1. Open the Bodymovin panel via Window > Extensions > Bodymovin
2. Find your composition in the list and click the Settings (cog) icon
3. In Settings, ensure the following are ticked, then click Save:
   • Glyphs (converts fonts to shapes)
   • Enable compression
   • Include in JSON (embeds rasterised images)
4. Click the three dots next to your composition and choose an export destination
5. Click Render and wait for it to complete

If the render fails: Go to AE > Preferences > General > Scripting and Expressions and confirm "Allow scripts to write files and access network" is enabled.

Testing the export

Once rendered, test it by playing the file in the Bodymovin preview to confirm it plays correctly and the animation is clear. If the preview shows a white image only, there is an issue with the file and it will not work when uploaded.

Sending to Pugpig

• If you're updating an existing splash screen - we can activate a new configuration version straight away once reviewed and the change will take effect in your live app, no app update required
• If this is a new splash screen - we'll provide a new app build for you to review and approve before it goes submitted an app update.