Hype Action Events

Extension Project
19

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