HypeIntersectEnabler_test.hype.zip (19.6 KB)
I deleted some code from the drag-and-drop-enabler and the result should be a “HypeIntersectEnabler”.
Works without custom coding.
When an intersection of two hype elements is false or true a Hype-custombehavior (defined by a data-attribute) will be triggered …
Usecase could be to start an animation, switch a scene, load some additional data … and so on …
On a targetelement set two data-attributes:
data-intersect -> true data-intersecttarget -> className of a sourceelement ( -> the elements on which an intersection with the target should be checked ...)
On a sourceelement set a
corresponding class and two data-attributes:
data-intersectcustombehavior -> name of a Hype-custombehavior to be triggered //optional data-intersectoffcustombehavior -> name of a Hype-custombehavior to be triggered //optional
if you’re unsure while testing please check the browserconsole which logs the intersection-events …
Should work in newer browsers supporting intersectionObserver.
If you don’t know about Hypes custombehaviours: it’s a builtin eventsystem. you can use it to run Hypebehaviours or catch the event and script some action -> powerful tool. Read it up in the Hype-documentation -> search the forum and find some useful extensions @MaxZieb wrote for it.
Note: you should not misuse the HypeIntersectEnabler as a collision-detection for games … it would be to slow/overload. Instead go with MatterJS then …
I may cleanup and refactor this to add some more features in the future.