Hype Global Behavior (Custom Behavior Extension)

The “echos” are the concept behind Hype GlobalBehavior. They form the unified layer of behavior. As said this is done to avoid disturbing local functionality and specially infinite loops.

“Echos” is therefor the wrong term in the sense that global behavior changes the custom behavior by adding a # in front. I could also have added an other string. I might even add an option to set the added string to something individual. Maybe something like global_ could help understand it better.

Thanks for that clarification, Max! I see now what is happening. I had noticed that when I had two instances on the page and hovered over the internal(round) Hype hover button, both instances played. But I hadn’t realized that that only worked if other instances were also listening for the #CustomBehavior.

Personally, I don’t think you need to change the naming… my confusion was in not understanding that I needed a listener starting with #. I was trying to put it in the script instead. Your screenshot above was what closed the loop for me. Perhaps a similar screen shot on your example page would help others.

Mostly like twitter:grinning::grinning::grinning::+1:

Really cool!:grinning:

↑ look at project
Updated to version 1.7
Removed a bug when triggering a Hype widget in a iFrame that was not present on the same page level


Great Storyteller
:grinning:

1 Like

Hello,

This extension seems to set unique elements Ids of multiple widgets working in page wisely, is it possible to develop another extension to make class name of elements in multiple widgets working globally too?

About your question:
This extension doesn’t set or use any element id’s!

Off topic side note:
I also advise against element id’s in a multi widget page. ID’s must be by definition unique… rather use CSS classes to select stuff. See…

Wow, great explanation! Love the tutorial, very cool. I’m trying to embed multiple Hype scenes into a web page at various positions. When one element appears within the view, I want to trigger an action for a fixed position div with another scene embedded into it. Would this framework be suitable for my scenario? Just want to make sure I understand it correctly, and that the project being referenced isn’t all contained within a Hype Document, with scenes embedded into one another.

1 Like

Sure does.

2 Likes

Sweet, thanks for the confirmation. Have been playing around with it, very straightforward with what you created. Thanks!

It is also now on GitHub and JsDelivr …

2 Likes

Awesome!

I have tried this using my own implementation, and then used the example by @paulk within Blocs. Perhaps it is a bug somewhere. Although with the global (#) notation… it doesn’t trigger. I have tried in both Hype Embed and in custom HTML.

Any pointers, would be helpfully. Stuck on this. No turning back now.

Send me the file.

Please look at the description here:

You must listen to the hastag version of the behavior… #playRotate etc. not the direct custom behavior.

So is there some code that I need to implement or is the configuration in the action inspector need adjusting? I understand the flow diagram, but without seeing an example or a reference to using the @ symbol for pinging, I feel unclear on the implementation. I’m sure it’s something simple, just eluding me.

Documentation is in the example in the first post but will be more plentiful in the future on GitHub. The @ symbol is currently only need to address a specific widget by export name. You emit the custom behavior as usual but you listen to the #-tag version. That is all.

I am thinking about introducing breaking changes to this in 2.0 to make it even more simple but still not sure on how specificity I will restructure the syntax. I’d like it to be something along the regular listener without any additions on the listener. But the we would need a custom emitter or a special symbol on the emitter side. Still thinking about it if that would make thing easier to grasp for people starting out using this.

1 Like

Ah, I see. Got it working. Took a step back from it, and as you said - it’s simple. Thanks for the pointer.

Hi @MaxZieb,

A few months back in this thread you helped me work out my issues with implementing this extension. Now the project I was starting on is finally finished and I want to share the result: https://go.pioneer.com/audiotour (scroll down to see icons along left side of page)

The goal was to be able to trigger the animation playback on each audio clip icon by hovering over the content row containing it. GlobalBehavior worked perfectly - thanks so much for the extension and your help!

And thanks to @jonathan and the team for the vector animation functionality in Hype4!

4 Likes