Hype Action Events

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-action
data-timeline-slide-end-action
data-timeline-drag-start-action
data-timeline-drag-end-action

The following config options are available

  • minVelocity Set the min velocity. Use only in special cases as it can lead to infinite movement after drag
  • maxVelocity Often a good way to avoid to high values after a drag'n'slide gesture
  • friction defaults to 0.95 and slows down the velocity of the continued drag on each tick. This adds an organic feel to the movement.
  • forceInstance, symbolInstance (can be used to add symbolInstance or hypeDocument, is auto-detected inside of symbols in favor of the symbol)
  • timelineName is the name of the timeline and default to the Main Timeline of either the hypeDocument or the symbolInstance
  • borderMode defaults to none as seen in regular Hype, and the movement just stops at the end or beginning. Using bounce allows bouncing of the end and beginning. In such an event, there is an additional friction applied. Finally, there is the shift mode, and it allows overshoots at the end or beginning. As we are talking about a timeline, this means the timeline restarts in the current play head direction.
  • borderFriction defaults to a factor of 0.1 and is only applied if the borderMode is set to bounce. Setting this to 0.9 allows for much more bouncing.
  • threshold this defaults to 0.01 and is the threshold the velocity must be under to trigger an end for a slide action

Example_Hype_Slide_Gesture.hype.zip (83,2 KB)

CleanShot 2022-02-10 at 15.41.32

1 Like

Example zooming a map and hiding offscreen elements

data-intersection-action
data-scene-prepare-action
data-pointerdown-action



There is a alternative version (only zoom) using a single SVG here

3 Likes

Example to determine offline mode and online connectivity

data-window-online-action
data-window-offline-action


Example to determine the visibility of a browser tab

data-document-visibilitychange-action


1 Like

↑ 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

2 Likes

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)

1 Like

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. This allows to embed an SVG into a rectangle, in this case a map*. The event is only defined in Hype on the rectangle but is triggered by all path elements in the SVG.

CleanShot 2022-02-16 at 22.22.15

Example_demonstrating_event_bubbling_and_closest_feature.hype.zip (81,0 KB)


Here is another version with transitions, ID and Name to CSV and dynamic tooltip positions:

Example_demonstrating_event_bubbling_and_closest_feature_transition_tooltip_pos.hype.zip (81,9 KB)


Map from simplemaps, all administrative regions are identified by name and id in the SVG source code. Find more maps and regions at Free SVG Maps - Resources | Simplemaps.com (they are free for commercial use, attribution is optional).

6 Likes

Yet, another example playing around with scroll

data-document-scroll-action


Example_playing_around_with_scroll_Mary_Cassatt.hype.zip (385,4 KB)

4 Likes

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

↑ 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…

4 Likes

Welcome back!

1 Like

Another example demonstrating form-based change

data-change-action


This example demonstrates the versatility to define an action handler inside a rectangle (div) or on the Additional HTML Attribute.

CleanShot 2022-02-26 at 00.32.27
Example_Data_Attribute_Change_with_a_select.hype.zip (38,0 KB)

1 Like

Example on creating your own event

data-apex-marker-click-action


4 Likes

Example scroll over larger area

data-animation-frame-action
data-pointermove-action
data-scene-load-action


Allows to pan across a larger image or SVG. Uses the pointer position in relation to the viewer width to pan the image. Hence, it should also work in a flexible layout scenario. This file also demonstrates how you can use a single callback function with a switch statement.

Example_smooth_scroll_large_areas_flexible_layout_compatible.hype.zip (697,9 KB)

3 Likes

Example zooming SVG map


This example is a follow-up to the Hype Dynamic Camera map, but uses a SVG as the basis. It's a quick implementation and bare bones and as such you need to keep the SVG at it's intended dimension and expand the camera square around it while editing in the Hype Editor.

Example_using_Hype_Action_Events_and_Hype_Dynamic_Camera_using_a_SVG.hype.zip (72,2 KB)

1 Like

Example demonstrating a variable font and the input action (slider)

data-input-action
data-scene-load-action


This is based on the beautiful variable font called "Manrope" (Open Font License). One could use a mutation observer or resize observer action to drive the font width based on the width of a rectangle. In this case, we are only listening to the input event of a simple slide input.

CleanShot 2022-03-08 at 16.00.43

Example_variable_font_and_input_action.hype.zip (81,1 KB)

3 Likes

3 posts were split to a new topic: Using Hype Action Events for collision detection

3 posts were split to a new topic: Using Hype Action Event for parallax scrolling effects

Example demonstrating scroll progress based on symbol bounding box

data-document-scroll-action
data-intersection-action

1 Like

Example demonstrating image sequence based on scroll progress

data-document-scroll-action
data-intersection-action

Based on the scroll progress example

Here is a version using an image sequence and a canvas:
https://playground.maxziebell.de/Hype/ActionEvents/Example_Data_Attribute_Document_Scroll_Experiment-Image-Frames.hype.zip

Preview:

Video preview as a link if the above embed doesn't work for some reason.

Update: Now uses a map for preloading and has some more options

3 Likes