Flyleaf

Preloader for Framer

Setup guide

How to use

01.

Copy the link you receive after purchase and paste it onto your home page in Framer. Flyleaf appears as a new layer.

02.

In the Layers tab, select Flyleaf. In the Style tab on the right, set Position to Absolute, so it takes up no space in your layout.

03.

Still in the Style tab, scroll down to the Flyleaf section. Click Images, which starts at 0 items, and add your photos. They play in list order.

04.

Publish your site. Flyleaf plays when the page loads, and you can also see it with the play button in Framer.

Settings

Images

Up to 10 of your own. The included photos play until you add yours.

Size

Photo width on desktop and tablet.

Phone Size

Photo width on phones.

Shape

Portrait, Square or Landscape.

Speed

From half speed to double.

Background

The color behind the photos.

Play

Always, or once per visit.

Good to know

It covers the page while it plays, then removes itself and leaves your site untouched.

It skips itself for visitors with reduced motion turned on.

On a site with several pages, keep it on the home page only, or set Play to Once.

Made by Bernardo Lickfold

Create a free website with Framer, the website builder loved by startups, designers and agencies.