Creating zoom effects like prezi

You know what really grinds my gears? When someone says something is not possible just because they don’t know how to do it…

OF COURSE you can build prezi-style presentation in Hype, WITHOUT any coding and without any external library like impress.js

Obviously, it will be slightly less comfortable than using Prezi, because Prezi is a specialized tool. On the other hand, Hype is more general tool, which will give you more flexibility than Prezi. So it always depends on particular project requirements whether to use Prezi or Hype.

The principle is this:

  • Each “slide” is a separate Symbol (you probably cannot use classic Scenes in Hypes for this), so that you can do independent animations within that slide.
  • You put all Symbols into a single Group, which you scale down e.g. to 20%, so that you can see all the Symbols at once, just like in Prezi
  • Then you just zoom in (to 100%) and center the Group so that given Symbol takes up the whole viewport, just like in Prezi.

That’s it. No coding.

Attached is a sample code. Timeline is paused in each step and you continue through the presentation just by hitting any key.

On top of that, I added some more coding - you can click/tap any Symbol to zoom directly to it, click again to zoom out again.

That’s the basic skeleton to give you the idea.

Cheers.

prezi_example.hype.zip (20.4 KB)

3 Likes