Example using hypeDocument.triggerAction and Symbol Handler
Here is a simple switch button using hypeDocument.triggerAction and also showing how Hype Action Event triggers a function handler named like a symbol if found on HypeSymbolLoad and HypeSymbolUnload (proactive).
This example uses Hype Action Events, Hype Matter Helper and Hype Drag Gesture to offer drag and drop support with precise drop zones and snapping. Note that this drag'n'drop approach relies on the Matter engine offered by Tumult Hype to determine arbitrary shape intersections. Hence, the export will include the physics engine.
With this demo, I am actually not so sure if I do it in such a way in an actual production (hence, the title of experiment). I would probably rather have the entire sticky element be one symbol and use a progress function. In this example file, there is a lot of whitespace just to have room to scroll to drive progress.
The following data attributes can be used to control the behavior of the scroll progress handler:
data-sticky-start: This attribute allows you to set a custom start position for the element's sticky behavior. If this attribute is not set, the element will become sticky when it reaches the top of the page.
This attribute allows you to set a custom end position for the element's sticky behavior. If this attribute is not set, the element will remain sticky until the user scrolls to the bottom of the page.
This attribute allows you to set a bounding box for the element's sticky behavior. If this attribute is set, the element will become sticky when it reaches the top of the bounding box, and will remain sticky until the user scrolls to the bottom of the bounding box.
There is a little progress handler action in the example as well (bonus):
The top position (in pixels) of the scrollable area.
The bottom position (in pixels) of the scrollable area.
The name of the timeline to be played (defaults to main timeline)
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
↑ 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
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.
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.
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 demonstrating a variable font and the input action (slider)
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.