[Hype Action Events] [image] GitHub - worldoptimizer/HypeActionEvents: Extension that offers code execution based on... Extension that offers code execution based on events and can be declared by data attributes. Furthermore, it offers code execution through the Custom Behavior …

Example using Animation Frame events data-animation-frame-action Here is a simple shadow animation driven by the ball element Example_Data_Attribute_Matter_Animation_Frame.hype.zip (29,3 KB)

↑ look at project 1.0.1 Proxy is default (LegacyMode available), firing HypeActionEvents on HypeDocumentLoad and refactored variables This release marks a move to a Proxy approach. Meaning, it drops support for IE as that interface is not supported on that Legacy Browser. If you really need to su…

↑ look at project 1.0.2 Prioritize user functions over functions in hypeDocument, added events on data-scene-load-action, data-scene-unload-action, data-scene-prepare-action and data-layout-request-action Added more documentation and another example file

I think it will be very useful. Thank you

↑ look at project 1.0.3 Added event functions for ResizeObserver, IntersectionObserver and MutationObserver, changed to passive DOM events, added requestAnimationFrame events, added window and document events There was a slight regression on the contextual variables since the introduction of the …

Example using the document scroll event data-document-scroll-action Here is a simple sticky effect, for demonstration purposes: Example_Data_Attribute_Document_Scroll.hype.zip (74,8 KB) Here is a more elaborate approach with more layers: Example_Data_Attribute_Document_Scroll_Parallax_Forest.h…

Interesting talk on events, the main loop and how processing of them has evolved … [Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...]

Example using the intersection observer event data-intersection-action Here is a simple implementation using intersection detection (also using margins) Example_Data_Attribute_Intersection_Ghost.hype.zip (102,8 KB) Artwork created by Luis Zuno ↑ look at project 1.0.4 Added the ev…

Example using Matter collisions events data-collision-start-action data-collision-end-action Here is a simple demo that continues its fall by being reset Version with inline code: Example_Data_Attribute_Matter_Collisions.hype.zip (46,1 KB) Version using a single Hype function (switch on event.…

↑ look at project 1.0.6 Added hypeDocument, element and event to the triggerAction context, added data-behavior-action Add your actions on specific element using custom behavior triggers. data-behavior-action listens to all behavior names data-behavior-test-action would only listen to the test …

Tumult Forums

Hype Action Events

Extension Project

h_classen (Hans-Gerd Claßen) January 22, 2022, 7:47am 8

this project is stunning

Building a website