Customize vector artwork from Adobe Stock to create a chilling loading screen animation for a mobile app.

Search for vector artwork to animate for a loading screen

Search for vector artwork on Adobe Stock that can be customized to help create a unique animation experience.

A search results screen in Adobe Stock after searching for neon letters with the Vectors filter enabled.

Copy and paste letters from Illustrator to XD

Copy specific letters from the Illustrator file and paste them into the XD layout, then converting each letter into a reusable Component.

Enlarged image of Illustrator file with vector letters selected to copy and paste into XD layout.

Create a second artboard with a letter turned off

Duplicate the artboard in XD, replace one of the letters with its “off” version, then lower the Opacity in the Appearance panel.

Two artboards in XD showing the neon letters with the ‘on’ and ‘off’ versions in the gothic frame.

Create a timed animation between artboards

In the Prototype workspace, link the first artboard to the second with a delayed Time event and Auto-Animate bounce effect. Create a few more artboards using the same process with different durations.

Prototype interface in XD with the two artboards showing the Interaction panel setting the Time event and Auto-Animate bounce effect.

Resolve the animation to the main screen

Complete the loading screen animation by linking the last animation screen to the main screen of the mobile app.

Prototype artboards showing the completed loading screen experience to resolve to main screen of mobile app.

The final result

Now you have a cutting-edge loading screen animation that builds anticipation for the user experience.

Image of two mobile app screens with the neon word  “ENTER” in a gothic frame on the left and the mobile app interface on the right.

 

Check out this curated collection from Adobe Stock with more images that you can use in your next project.

 

01/20/2021
¿Le ha servido de ayuda esta página?