Figma Prototype Challenge Day 10: Parallax

Elevator app loading screen

Flow of the parallax prototype. Elevator illustration source: Freepik by macrovector

Here we come with our prototype 10 as a part of the Figma Prototype Challenge! As usual, check here about our reasons to participate, our process and find the links to other prototypes!

This time we created a prototype of a fictional app for a technical user that is in charge of monitoring elevators’ performance. We came up with a simple loading screen with a parallax effect. This animation would give user a warm welcome and something to interact with, while an app is loading screens.

This prototype is built with 2 layers that move in opposite directions. The effect is imitating movement of an elevator between floors.

1. Login screen. 2. Animation instead of standard loading. 3. Welcome message

How did we do it?

• To place objects on the isometric axes we used “Easometric” plugin;
• To align movement of the elements (for example floor numbers), we combined them in groups;
• To create a smoother movement between the background and the elevator we’ve used as little as 3 screens;
• To add more life-like experience, we used interactive component for the login form, button and elevator numbers;
• To create a seamless transition, we made sure to add a new animation a little bit before the parallax effect ended.

As usual, if you would like to know how to create interactions like this, let us know in the comments!