Blocs interaction on hype preview bric

I Need Help
1

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

2

Hey @mauriciotrentin

I do have Hype, but haven’t had a need to add it to a blocs site yet. In saying that, since Hype does use JavaScript, you should be able to use that to toggle the collapse class of any element on the page.

I think if you have Hype Pro you can do this with attributes.

EDIT: I thought I would test it out. Works well.

3

Hi @PeteSharp, thanks for your response.

I’ll try that. Thanks. Not sure about one detail.

I do not want to collapse something visible in Blocs. I want to make a previous invisible Bloc, visible, by clicking not a button, but an Hype animation, inside a Blocs3 site.

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

Thanks

M

4

Hey @mauriciotrentin

Oh right.

You can do this a number of ways, in Hype set the Action for “On Mouse Click” to run Javascript and create a function.

Replace “test” with what ever the ID is of the element you are unhidding. And what ever class you are using to hide the element.

  var element = document.getElementById("test");
  element.classList.remove("class-that-hides-element");
5

Hi @PeteSharp, thanks for the help.
I’ve used element.classList.toggle

Worked well, but the transition is instantaneous and without motion. (The blocs structure an other blocs below just jump to new positions when the controlled bloc turns visible)
Is there a way to that all the rest of Blocs site contents slide, animated?

Thanks,

M

6

Nice. You should be able to do that with CSS on the class your toggling maybe?

eg.

.myClass {transition: all 0.4s}
7

That classList.toggle is pretty cool, I hadn’t come across it before.

8

Hey @mauriciotrentin as Jonathan mentioned over in the Hype forum and @PeteSharp mentioned here too, you should be able to toggle anything on the page via the Hype animation using the following code.

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

You would need to give the target Bloc within your Blocs project an ID and then use that ID in the Hype JS script, that is triggered by a Hype button.

Also, don’t forget Blocs uses Jquery so you also have the option of using the toggle() call, to toggle visibility.

$('#myblocsid').toggle();

2 Likes
9

Thanks again @PeteSharp, I’ll try that.
M

10

Hey @Norm, thanks for your help here.
Is there a way to easy out/control time of that blocsID toggle transition with javascript and/or Jquery?

Thanks

M