Creating zoom effects like prezi

my english is not so good but i hope everyone could understand my question. normally i’m using prezi for my presentations but it comes very fast to a point where prezi is crashing because there is too much content in the presentation and i can’t change something without waiting minutes until the action is performed. so i’m searching for a substitute. so the question is: is it possible to create with tumult hype zooming effects and fading in/out texts like in prezi without knowing anything about coding? i searched in the forum, but couldn’t find anything. maybe someone of you ideally have a link for a similar thing to prezi created with hype?
thanks a lot for a answer.

It is indeed possible to do something like Prezi within Hype but unfortunately it would require some degree of coding or using an outside library like impress.js if at all possible.

It’s a case of using css3 transitions.


thanks for the answer. i really don’t know nothing about coding, but i could invest the days to get prezi working in learning something about it. what kind of coding is necessary? java, css, …?

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. (20.4 KB)


Wow, that’s a really great example! It definitely shows the flexibility on what presentations could be made using Hype.

(Also in fairness to the original poster, Hype did not have the necessary CSS scale transformations until v3.5)

OK I apologize to DBear if this was really made possible only by the latest release.

And thanks for feedback! Just came back to Hype good 3 years after buying version 1.0 and I’m well impressed how far you’ve gone since that!

Since your profile says “Team Tumult” may I kindly ask you to have a look at a topic closely related to this one? Basically trying to use Hype’s native Scenes in this Prezi-style presentations, please see JavaScript API - copy/duplicate elements across Scenes?

Thanks a lot!

Thanks @jonathan

@josefrichter yes this was only made possible (well extremely easier) by the scale transformations
I appreciate you haven’t been using Hype for a while so maybe a suggestion of not jumping in and getting all “Hyped up” (excuse the pun, intentional) and shouting at the previous posters. (me included)

I accept your apology. I have already built many Prezi like presentations using the new v3.5 which makes it super easy to do but good work on your example.

I am however a little hesitant to now help you with your topic you have posted but as you have asked “Team Tumult” I’ll leave it to one of them to perhaps answer your question.

1 Like

You’re absolutely right, my bad for getting hyped up and jumping to wrong conclusions. Sorry again.

really nice one :slight_smile:

If some of you want to get their hands dirty in the code, here is a hype document integrating impress.js. It s only a symbole in a scene with the default code from impress.js git repo.

So if you want to have more than a “prezi” in your mini site, you can add a menu and other scenes, with more content. It s a good start: (33.8 KB)
(that way you can also manage to have an alternative content for small screens)

1 Like