Autodemo now matches screenshots in any order

This update makes the setup in Framer shorter. You now add each screenshot one time, and the order does not matter.

Before this update

You added a screenshot to every step. A demo with 12 steps on 4 screens meant that you added the same screenshot many times, in the right order. One wrong image put the cursor on the wrong screen.

What changed

In Framer, Autodemo now has a Screenshots list. Add each screenshot from the setup page to it one time. Autodemo puts each screenshot on the steps that belong to it.

• A strip on the canvas shows how many screenshots you added, for example Screenshots added: 3 of 4.
• If a screenshot is missing, its steps use the first screenshot. The demo never shows an empty frame.

How the match works

The setup page saves a small print of each screenshot in the setup code: a grey copy that is 48 by 36 cells. In Framer, Autodemo makes the same print of every screenshot you add and compares the prints. Each screenshot goes to the steps with the closest print.

Each cell keeps 256 shades of grey. Because of this, two screens that look almost the same still get different prints, for example the same page before and after a click.

How to use it

1. Open the setup page and make a new setup code.
2. In Framer, paste the code into Setup code.
3. Add each screenshot under Screenshots, in any order.

Questions