Structure

After the splash screen (with spinning Hyperlapse icon) the user will land on the first video page. They can swipe through the video pages, but not return to the splash screen.

So to make sure the user cannot ‘swipe back’ we put the videos in a PageComponent that’s positioned off-screen, and that we slide into place when the loading sequence completed.

We’ll first create the video pages, and only then add the splash screen.

The splash screen is simple, and by creating it last, we don’t have to endure the loading sequence numerous times while building the prototype.

To start: Create a new document in Framer and save it as ‘Hyperlapse.’ Set the Preview Window to an iPhone SE device.

The videos and image assets are for an 1136 x 640 screen resolution (4.0″ – 320 x 568 points), but we’ll make our prototype responsive enough to also work on 4.7″ or bigger screens.

Switching off the Framer preloader

If you want to test your prototype on a device, it’s advisable to disable Framer’s preloader. The preloader seems to wait too long (probably until all the videos are loaded) and tends to skip the spinning wheel animation because of it.

# Disabling the preloader
Framer.Extras.Preloader.disable()