[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)

Example of using Hype Slide Gesture This example is a refactored version of the custom continueAfterDrag functionality. It offers more options and settings than the regular version, built in to Hype. This gesture offers the following events: data-timeline-drag-start-action data-timeline-slide-move…

Example zooming a map and hiding offscreen elements data-intersection-action data-scene-prepare-action data-pointerdown-action [image] Worldmap -> timeline continent Here is an example using the hand drawn US map from @blur (Kevin). …

Example to determine offline mode and online connectivity data-window-online-action data-window-offline-action [image] How to trigger a "No Internet" Warning Pop-up? [CleanShot 2022-02-13 at 20.24.20@2x] [CleanShot 2022-02-13 at 20.25.02@2x] Here you go w…

Example to determine the visibility of a browser tab data-document-visibilitychange-action [image] Changing browser tabs affecting timeline behavior? [CleanShot 2022-02-14 at 10.52.38@2x] [CleanShot 2022-02-14 at 10.53.46@2x] Not as elaborate on checking e…

↑ look at project 1.0.9 Removed blur and focus and added focusin and focusout instead, moved contextmenu, keydown, keypress, keyup and submit events to non passive allowing event.preventDefault(), higher execution order on Hype functions

Example demonstrating form-based events like focus and change data-focusin-action data-focusout-action data-change-action [CleanShot 2022-02-16 at 19.41.57] Example_Data_Attribute_Focus_And_Change.hype.zip (29,2 KB)

Example demonstrating event bubbling and closest action feature data-pointerover-action data-pointerout-action data-pointermove-action This example demonstrates multiple features. Foremost, the event bubbling aspect in combination with the latest update (1.0.9+) using the closest action match. T…

Yet, another example playing around with scroll data-document-scroll-action Example_playing_around_with_scroll_Mary_Cassatt.hype.zip (385,4 KB)

Example connecting two rectangles (Hype elements) with an SVG line data-mutation-action data-scene-load-action [CleanShot 2022-02-17 at 17.46.15] [image] Connect Cities with a line using Javascript [CleanShot 2022-02-17 at 17.34.13] Download: DrawLineSVG…

↑ look at project 1.1.0 Added hypeDocument.querySelector and hypeDocument.querySelectorAll, minor fixes I am back after :microbe: :chart_with_downwards_trend: :mask: :face_with_thermometer: … was a real shocker, get vaccinated, I am glad I was…

Hype
Whisk
Reflect
Store
Support
Forums
Blog
About Us

Tumult Forums

Hype Action Events

Extension Project

show post in topic

Home
Categories
Guidelines
Terms of Service
Privacy Policy

Powered by Discourse, best viewed with JavaScript enabled

Products

Hype 4
Hype Pro
Whisk
Reflect

Company

About Us
Press
Privacy Policy

Social

Blog
@hypeapp
@TumultWhisk
Facebook
Instagram

Hype Support

Support Portal
Downloads
FAQ
Tutorials
Documentation
Forums

Whisk Support

Support Portal
Downloads
FAQ
Documentation
Forums

Store

Tumult Store
Education Store