Hype controling Blocs

Hi. Need some help here. I would like to add interaction (inside blocs) using an animation previous made on HYPE. I’d like to track that animation as a button inside blocs, so it would be easy to toggle visibility on other blocs by clicking it. Is there an simple way to do that? Thanks, M

Can you point us to the API for the Blocs button?

Hi Max, thanks for your response. Not sure I did understand your question. I am using Blocs3 and HypePro4.

I did a very simple animation using Hype. And export it to use inside a Blocs 3 site. Works perfectly. But you I cannot connect interactions inside Blocs 3.

Almost anything inside Blocs can be interactive _by default _(texts, images, icons can be tracked as buttons and change behaviours (like toggle visibility, for example) of any other bloc in the page. That is very simple to do, with a Bloc ID.

Except Hype animations. When you import a Hype animation inside blocs, all the interactive components/codes has to be part of the original Hype animation. Almost all the behaviours have to be coded at the animation level, except scroll control for the timeline, and other parameters that you can change inside Blocs3.

Even if its simple create events inside Hype to control timelines of the animation itself, using mouse events, it seems more complex to control other stuff inside the Blocs site, not the animation itself, by clicking the animation.

So, if I put an ID at a specific bloc inside Blocs3, how can I write a simple javascript on Hype that make an clickable Hype animation control (toggle visibility) of that specific Bloc, in any browser?


To clarify, you are looking to control Blocs-made content from a Hype animation on the page?

Is there a specific problem you are running into? Hype animations run within the same HTML/DOM tree as Blocs, so this appears to basically be no different than controlling other HTML. Then you could add an On Mouse Click handler in the Hype document that would run javascript and look something like:

document.getElementById("myblocsid").style.display = "none";

In this case, it will hide the element given the correct "myblocsid".

I'm not sure if Blocs has an API to control its app's further interactions given an ID (or what the consequences of changing the DOM underneath Blocs might be; Hype's runtime doesn't like this type of thing). But I don't think there would be any problems running this type of code from within the context of a Hype document.


@mauriciotrentin I've commented in greater detail over at the Blocs forum in the post you have there.

Basically what @jonathan has has suggested should work fine.